为何在Webpack的DefinePlugin中使用JSON.stringify('production')？

这个问题问得特别关键，很多刚接触Webpack的同学都会踩这个坑！核心原因得从DefinePlugin的工作原理说起——它本质上是做静态文本替换，而不是像普通JS代码那样给变量赋值。

咱们拆解开对比看：

• 如果直接写'production'，Webpack在替换时会把process.env.NODE_ENV直接替换成production，最终打包后的代码会变成：

  process.env.NODE_ENV = production
  这里的production没有引号，JS引擎会把它当成一个未定义的变量名，运行时直接抛出ReferenceError: production is not defined的错误。

• 而用JSON.stringify('production')的话，这个方法会把字符串转成带双引号的标准JSON格式，也就是"production"。替换后打包的代码就变成：

  process.env.NODE_ENV = "production"
  这就成了合法的字符串赋值，浏览器能正确识别这是一个字符串值。

另外还有个额外优势：JSON.stringify能适配更多类型的环境变量值。比如你要设置布尔值true，用JSON.stringify(true)会直接输出true（不带引号），替换后就是process.env.NODE_ENV = true，正好是JS里的布尔字面量；如果是字符串类型的配置值，它也能自动加上引号，避免手动写引号的麻烦和出错概率。

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