之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.环境变量

之前我们是通过package.json中，不同命令指向不同配置文件，来进行不同环境的打包，现在我们有另外一种方式。

我们现在删除webpack.dev.js和webpack.prod.js中的merge，只单独导出对应环境的配置。然后在webpack.common.js中引入merge。

然后把webpack.common.js中的内容变成commonConfig对象

const commonConfig = {  entry: {    main: './src/index.js'  },  output: {    path: path.resolve(__dirname, '../dist')  },  module: {    rules: [      {        test: /.(jpg|png|gif)$/,        use: {          loader: 'url-loader',          options: {            name: '[name]_[hash:5].[ext]',            outputPath: 'images/'          }        }      },      {        test: /.(eot|ttf|svg|woff)$/,        use: {          loader: 'file-loader'        }      },      {         test: /\.js$/,         exclude: /node_modules/,        use: [          {            loader: 'babel-loader'          },          {            loader: 'imports-loader?this=>window'          }        ]      }    ]  },     plugins: [    new HtmlWebpackPlugin({      template: 'src/index.html'    }),    new CleanWebpackPlugin()  ],  performance: false,  optimization: {    usedExports: true,    splitChunks: {      chunks: "all",      cacheGroups: {        vendors: {          test: /[\\/]node_modules[\\/]/,          priority: -10,          name: 'vendors'        }      }    }  }}复制代码

然后我们就可以通过传参来判断现在是打包哪一个环境的代码，去对应merge不同环境的配置文件。

现在打包的时候，开发环境只需要指向webpack.common.js文件即可，而打包线上环境的代码，需要加一个--env.production参数

环境变量的值可以自由定，比如可以让值等于abc

这样，打包配置需要改成