webpack运行npm run watch时DefinePlugin配置的process.env.NODE_ENV为undefined问题

问题根因 #

你在webpack.config.js中直接读取的process.env.NODE_ENV是Node.js运行时的环境变量，webpack的mode配置并不会自动给Node执行上下文注入这个变量，所以你读取到的值本身就是undefined，DefinePlugin自然会把ENVIRONMENT替换为undefined。

解决方法 #

方法1：执行命令时手动注入NODE_ENV #

你可以在执行webpack命令时主动设置NODE_ENV的值：

• 如果是Mac/Linux环境，直接修改package.json中的watch脚本：

  "scripts": {
    "watch": "NODE_ENV=development webpack --watch --mode=development"
  }
  

• 如果需要兼容Windows环境，可以先安装跨平台环境变量工具cross-env：
  执行npm i cross-env -D，再修改脚本：

  "scripts": {
    "watch": "cross-env NODE_ENV=development webpack --watch --mode=development"
  }
  

方法2：通过webpack配置函数读取mode参数 #

webpack支持导出一个函数作为配置，函数可以接收到命令行传入的mode参数，无需手动设置环境变量：
修改webpack.config.js的导出逻辑如下即可：

module.exports = (env, argv) => {
  return {
    // 你原本的其他配置（entry、output、module等都保持不变）
    plugins: [
      new webpack.DefinePlugin({
        ENVIRONMENT: JSON.stringify(argv.mode),
        ANOTHER_VARIABLE: JSON.stringify("another variable value"),
      })
    ]
  }
}

修改后只要你执行的webpack命令带了--mode=development参数，argv.mode就能自动拿到对应的值，无需额外配置环境变量。

修改完成后重新执行npm run watch，生成的bundle.js中_environment就会被正确赋值为development。

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