Webpack 5中能否将NODE_ENV与mode设置为不同值？

可以实现两者独立设置，但需要调整配置来避免Webpack 5的警告，核心是让Webpack自动管理的NODE_ENV（用于打包优化）和业务环境标识变量分开，具体方案如下：

问题原因 #

Webpack 5会默认将mode值同步注入process.env.NODE_ENV，当你手动通过DefinePlugin设置不同的NODE_ENV值时，就会触发两者不匹配的警告。它的设计期望mode和NODE_ENV对齐，但我们可以通过拆分变量的方式绕过这个限制。

推荐解决方案：拆分业务环境标识与Webpack环境变量 #

1. 新增业务环境变量 #

用APP_ENV替代原NODE_ENV来标识业务环境（local/development/qa/staging/production）：

• 在你的环境配置文件（如.env.local、.env.qa等）中设置APP_ENV=local/development/qa/staging/production
• 调整DefinePlugin配置，注入APP_ENV而非业务用的NODE_ENV：

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      APP_ENV: JSON.stringify(process.env.APP_ENV ?? ''),
      ...variablesFromEnvironmentJsonConfig
    }
  }),
  // 其他插件
]

2. 保持原有mode优化逻辑 #

继续根据业务环境判断是否开启生产打包优化，Webpack会自动将process.env.NODE_ENV设置为与mode一致的值：

const shouldOptimizeBundle = ['staging', 'production'].includes(process.env.APP_ENV);
mode: shouldOptimizeBundle ? 'production' : 'development',

3. 业务代码中使用新变量 #

在业务逻辑里用process.env.APP_ENV判断环境：

if (process.env.APP_ENV === 'local') {
  // 本地环境专属逻辑
} else if (process.env.APP_ENV === 'qa') {
  // QA环境专属逻辑
}

这种方式既保留了业务环境标识与打包优化策略的独立性，又符合Webpack 5的设计规则，不会触发警告，同时也能保证React、Lodash等依赖库根据Webpack自动注入的NODE_ENV正确生成优化后的代码。

不推荐方案：强制保留NODE_ENV作为业务标识 #

如果因历史原因必须用NODE_ENV标识业务环境，需要禁用Webpack自动注入NODE_ENV的逻辑，但可能导致依赖库无法正确优化：

module.exports = {
  mode: shouldOptimizeBundle ? 'production' : 'development',
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV ?? ''),
      ...variablesFromEnvironmentJsonConfig
    })
  ],
  optimization: {
    nodeEnv: false // 关闭Webpack自动设置NODE_ENV的行为
  }
};

内容的提问来源于stack exchange，提问作者mellis481