Webpack系列——环境变量的使用

webpack 命令行 环境配置 的 --env 参数，可以允许你传入任意数量的环境变量。而在 webpack.config.js 中可以访问到这些环境变量。例如，--env.production 或 --env.NODE_ENV=local（NODE_ENV 通常约定用于定义环境类型）。

webpack --env.NODE_ENV=local --env.production --progress

package.json

{
  ...
  "scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --config ./build/webpack.common.config.js",
    "build": "webpack --env.production --config ./build/webpack.common.config.js",
    "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.common.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
  ...
}

如果设置 env 变量，却没有赋值，--env.production 默认表示将 --env.production 设置为 true。

对于我们的 webpack 配置，有一个必须要修改之处。通常，module.exports 指向配置对象。要使用 env 变量，你必须将 module.exports 转换成一个函数：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { merge } = require('webpack-merge');
const devConfig = require('./webpack.dev.config');
const prodConfig = require('./webpack.prod.config');
​
const commonConfig = {
  entry: {
    main: './src/index.js'
  },
  optimization: {
    usedExports: true
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 5 * 1024
          }
        }
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/i,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'fonts/'
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  performance: false, // 关闭性能上的问题提示
  output: {
    path: path.resolve(__dirname, '../dist')
  }
}
​
module.exports = (env) => {
  if (env && env.production) {
    return merge(prodConfig, commonConfig)
  } else {
    return merge(devConfig, commonConfig)
  }
};