webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用

mode的基础介绍

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

只需在配置对象中提供 mode 选项：

  mode: 'production',
};

或者从 CLI 参数中传递：

webpack --mode=development

问题来了

使用上面任何一种配置,在模块中虽然能够拿到process.env.NODE_ENV,但是在webpack.config.js中拿不到，打印及输出如下：

配置文件中：

模块中打印结果：

为保证在配置文件和模块中都能拿到这个环境变量，需改变配置如下

NODE_ENV=development webpack

如上配置，打印结果如下：

如此在模块中、配置文件中就可以同时拿到环境变量了。

注意：在进行“NODE_ENV=development webpack”配置时候，在大多数Windows命令行中在使用NODE_ENV = production设置环境变量时会报错。同样，Windows和Linux命令如何设置环境变量也有所不同。所以需要使用

cross-env来支持跨平台设置和使用环境变量的脚本，这样可以设置在不同的平台上有相同的NODE_ENV参数。

配置如下：

cross-env NODE_ENV=development webpack

用途

根据不同的环境进行不同的配置，如不同环境的域名不同，我们就可以利用 DefinePlugin（https://www.webpackjs.com/plugins/define-plugin/）进行配置

config/env.js

const env = process.env.NODE_ENV;
const config = {
  development: {
    loginApi: 'www.abc-login-test.com',
    orderApi: 'www.abc-order-test.com'
  },
  production: {
    loginApi: 'www.abc-login.com',
    orderApi: 'www.abc-order.com'
  }
};
module.exports = config[env];

webpack.config.js

const envConfig= require('./config/env');
module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      envConfig: JSON.stringify(envConfig)
    })
  ]
  ...
}

index.js

console.log(envConfig)

打印结果如下：

总结：