关于webpack的使用

{
  "name": "webpack demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "server": "webpack-dev-server --open",
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  },
  "author": "",
  "license": "ISC","dependencies": {

　　　　"swiper": "^4.0.7",
　　　　"vue": "^2.5.2",
　　　　"vue-router": "^2.8.1",
　　　　"element-ui": "2.2.1",

"react": "^15.6.1",
     "react-dom": "^15.6.1"
  }
}

//全局安装
npm install -g webpack

//局部安装
npm install --save-dev webpack

module.exports = {
  entry:  __dirname + "/src/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/dist",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
}

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" 
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}

module.exports = {
  devtool: ‘eval-source-map‘,//source maps,便于调试
  entry:  __dirname + "/src/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  }
}

npm install --save-dev webpack-dev-server

module.exports = {
  devtool: ‘eval-source-map‘,

  entry:  __dirname + "/src/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },

npm install --save-dev style-loader css-loader

module.exports =     
{
    module: {
      rules: [
        {
          test: /\.css$/, //指定匹配文件,使用style-loader,css-loader
          use: [
            ‘style-loader‘,
            ‘css-loader‘
          ]
      }]
     }
}

npm install --save-dev postcss-loader autoprefixer

//webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}

module.exports = {
    plugins: [
        require(‘autoprefixer‘)
    ]
}

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: ‘Hello world!‘
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

const webpack = require(‘webpack‘);

module.exports = {
...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin(‘版权所有，翻版必究‘)
    ],
};

npm install --save-dev html-webpack-plugin

const webpack = require(‘webpack‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
    ...
    plugins: [
        new webpack.BannerPlugin(‘版权所有，翻版必究‘),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        })
    ],
};

npm install clean-webpack-plugin --save-dev 

  const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
  const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);

  module.exports = {
    ...
    plugins: [
      new CleanWebpackPlugin([‘dist‘]),//清除dist目录
      new HtmlWebpackPlugin({ //生成一个html页面指定其title,然后会自动将js文件生成引入js代码
        title: ‘Output Management‘
      })
    ]
  };

const webpack = require(‘webpack‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);

module.exports = {
    ...
    devtool: ‘eval-source-map‘,
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,
        hot: true
    },
    ...
    plugins: [
        new webpack.BannerPlugin(‘版权所有，翻版必究‘),
        new CleanWebpackPlugin([‘dist‘]),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.NamedModulesPlugin(),//添加该插件更容易观察依赖文件被更新
        new webpack.HotModuleReplacementPlugin()//热加载插件
    ],
};

process.env.NODE_ENV = ‘production‘

const path = require(‘path‘);
 const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

 module.exports = {
   entry: {
     app: ‘./src/index.js‘
   },
   plugins: [
     new CleanWebpackPlugin([‘dist‘]),
     new HtmlWebpackPlugin({
       title: ‘Production‘
     })
   ],
   output: {
     filename: ‘[name].bundle.js‘,
     path: path.resolve(__dirname, ‘dist‘)
   }
 };

npm install --save-dev extract-text-webpack-plugin

 const merge = require(‘webpack-merge‘);
 const UglifyJSPlugin = require(‘uglifyjs-webpack-plugin‘);
 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
 const common = require(‘./webpack.common.js‘);

 module.exports = merge(common, {
   module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
   plugins: [
     new webpack.BannerPlugin(‘版权所有，翻版必究‘),
     new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
     }),
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.optimize.UglifyJsPlugin(),
     new ExtractTextPlugin("style.css")
   ]
 });

const merge = require(‘webpack-merge‘);
const common = require(‘./webpack.common.js‘);

module.exports = merge(common, {
  devtool: ‘inline-source-map‘,
   devServer: {
     contentBase: ‘./dist‘
   }
 });

     //plugins数组当中添加一下参数
     new webpack.optimize.CommonsChunkPlugin({
       name: ‘common‘ // Specify the common bundle‘s name.
     })

plugins: [
      new webpack.ProvidePlugin({
       _: ‘lodash‘
      })
]

plugins: [
      new webpack.ProvidePlugin({
       _: ‘lodash‘,
       join:[‘lodash‘, ‘join‘]//我们可以这样进行配置 [‘module‘, ‘child‘, ‘child‘]
      })
]

module.exports = {
..
    output: {
        path: path.resolve(__dirname, ‘dist‘),
        filename: "bundle-[hash].js"
    },
   ...
};

plugins:[
    ...,
    new webpack.HashedModuleIdsPlugin(),
    ...
]