踩坑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也是可以解決問題的