Webpack多环境配置

当我们使用webpack进行多环境打包的时候会有如下时需求：

• 在执行代码中使用不同的变量，比如：API的请求地址
• 在webpack的config文件中使用不同的配置，比如：只在dev环境配置dev server

针对这两个需求，我们逐一进行介绍。

创建多环境配置文件

由于dev和prod环境存在大量通用的配置，所以我们将通用的配置放在common文件中，并使用webpack-merge工具进行合并。
webpack.common.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './index.js',
  plugins: [
    new HtmlWebpackPlugin(
      { template: 'index.html' }
    )
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

webpack.dev.js

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

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

webpack.prod.js

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

module.exports = merge(common, {});

我们在webpack.common.js中设置了通用entry和output配置，并引入相关的通用配置。在webpack.dev.js中添加了devServer配置，在webpack.prod.js中暂时没有引入其他配置。

创建NPM Scripts

主要scripts的配置

  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server ---config webpack.dev.js"
  },

在执行代码中使用不同配置

为了能够在prod和dev环境执行时使用不同的变量，我们需要引入definePlugin。
在webpack.prod.js中添加defindPlugin：

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
})

在webpack.dev.js中添加defindPlugin：

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('dev')
})

注意：因为这个插件直接做的文本替换,给定的值必须包含字符串本身内的实际引号。通常，有两种方式来达到这个效果，使用 ‘“production”’, 或者使用 JSON.stringify(‘production’)

然后我们在执行代码index.js中添加如下代码：

 console.log('Looks like we are in',process.env.NODE_ENV);

可以在不同环境下输出对应的production或者dev。

但是使用defindPlugin定义的变量无法在构建脚本webpack.config.js中，将process.env.NODE_ENV设置为”production”。
比如，我们将webpack.prod.js修改为：

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

module.exports = merge(common, {});

console.log('run', process.env.NODE_ENV);

那么在build的时候输出的并不是production，而是undefined。

在webpack配置中使用不同变量

基于上述提到defindPlugin的定义的变量无法在config文件生效的问题，我们该如何解决呢？这时候需要引入cross-env。
使用方式：

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack.prod.js"
  }
}

这时候当运行npm run build的时候就可以输出配置的production。基于cross-env我们就可以在webpack config中基于不同环境进行配置，比如：文件是否添加hash值等。