複習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

這樣，打包配置須要改爲