webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用-Windows系列-PHP中文网

mode的基础介绍

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

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

  mode: 'production',
};

或者从 CLI 参数中传递：

webpack --mode=development

问题来了

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

配置文件中：

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

模块中打印结果：

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

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

NODE_ENV=development webpack

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

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

Live PPT

一款AI智能化生成演示内容的在线工具。只需输入一句话、粘贴一段内容、或者导入文件，AI生成高质量PPT。

下载

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

注意：在进行“NODE_ENV=development webpack”配置时候，在大多数Windows命令行中在使用 NODE_ENV = production 设置环境变量时会报错。同样，Windows和Linux命令如何设置环境变量也有所不同。所以需要使用 cross-env 来支持跨平台设置和使用环境变量的脚本，这样可以设置在不同的平台上有相同的 NODE_ENV 参数。

配置如下：

cross-env NODE_ENV=development webpack

用途

根据不同的环境进行不同的配置，如不同环境的域名不同，我们就可以利用 DefinePlugin（https://www.php.cn/link/af6e8730844faa627625a6c3fa98f0fc

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)

打印结果如下：

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

总结：

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