踩坑Conflicting values for 'process.env.NODE_ENV'

上个季度升级了webpack5。本以为一切都没问题了。今天偶尔发现一个遗留问题：上回设置的process.env.NODE_ENV不对。

按项目需求，业务需要区分多套环境，因此在各环境需要通过rewrite.config.json改写process.env.NODE_ENV的值，比如设置为“pre”，“prd”。一贯也是这样做的，但上次升级webpack5后，process.env.NODE_ENV默认被设置为“production”，导致一些业务出现了问题。

 

因此计划用DefinePlugin重新设置NODE_ENV。但结果却报错 WARNING in DefinePlugin  Conflicting values for 'process.env.NODE_ENV' 

经过查找资料，发现可能原因有二

1.是因为package.json的scripts中，start和build命令都预设了NODE_ENV的值，不再支持修改

2.optimization.nodeEnv 在不设置时（一般都不会设置），默认读取mode的值（默认是production或development）,DefinePlugin重新设置时与mode不一致，导致冲突

总的来说，都是【有预设值，不再支持修改】

 

于是我不再使用DefinePlugin插件（我的项目中，这个插件只有这个作用，因此可以屏蔽），而是在optimization.nodeEnv中设置各环境需要的值。问题解决

optimization: {
　　nodeEnv: isEnvProduction ? '{{PROD_ENV}}' : 'local'
　　// ...其他配置
}

//{{PROD_ENV}} 在后面步骤中会被rewrite.config.json替换

 

ps:猜想改mode也是可以解决问题的