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

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

絕刀狂花

发布： 2025-10-02 10:17:00

原创

623人浏览过

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的使用

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

查看详情

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

注意：在进行“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