webpack.DefinePlugin同语句含process.env时未替换全局变量问题

问题原因 #

这不是webpack.DefinePlugin本身的替换逻辑出错，是DefinePlugin替换完成后，和webpack内置的process.env处理逻辑、死代码消除（DCE）逻辑的交互bug导致的表象，具体执行流程如下：

1. DefinePlugin首先已经把两处__CLIENT__都替换成了false，此时第二行代码实际变为：

   export const processEnv = false ? null : process.env;
   

2. 当你的构建目标为浏览器端（target: 'web'）时，webpack默认不会注入完整的process全局对象，会对代码中的process.env访问做特殊的静态替换处理。
3. 旧版本webpack（5.70版本以下）存在已知bug：当处理包含process.env的常量条件三元表达式时，如果常量条件为false，死代码消除逻辑会错误回溯之前的DefinePlugin替换操作，把常量条件还原成了原始的__CLIENT__标识符，才会出现你看到的“替换失效”现象。
4. 而当__CLIENT__设为true时，三元表达式的真值分支命中，死代码消除会直接砍掉后面包含process.env的分支，不会触发上述bug；把process.env换成普通值时，也不会触发process.env的特殊处理逻辑，所以看起来替换一切正常。

修复方案 #

你没有配置错误，可以通过以下方式彻底解决：

• 优先升级webpack到5.70以上版本，这个交互bug在后续版本已经被官方修复
• 如果无法升级版本，可以在配置中关闭webpack对process全局对象的注入和特殊处理：

  // webpack.config.js
  module.exports = {
    // 其他配置保持不变
    node: {
      process: false
    }
  }
  

  如果你的代码还有其他地方需要用到process.env的变量，可以配合DefinePlugin提前定义需要的环境变量即可：

  new webpack.DefinePlugin({
    __CLIENT__: JSON.stringify(false),
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  })
  

• 你当前使用的局部变量中转方案也是有效的规避方式，没有额外副作用，可以正常使用。

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