复习webpack4之环境变量

以前学习过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

这样，打包配置须要改为