process.env.NODE_ENV的理解

首先在webpack4及以上的版本中，需要指定mode参数

mode的参数为development、production、none

如果不指定，则会默认为production
如果参数值不是上面的其中一个，启动项目则会失败
有两种方式配置：

module.exports = {
   mode:'production'
}

或者在命令行指定

webpack --mode=production

mode为development的时候，会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin插件。

module.exports = {
 mode: 'development'
//相当于配置了下面这些插件
 plugins: [
   new webpack.NamedModulesPlugin(),
   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }), //把process.env.NODE_ENV配置成全局变量，可以在项目中区分生产环境或开发环境
 ]
}

mode为production的时候，会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin插件

module.exports = {
  mode: 'production',
//相当于配置了下面这些插件
  plugins: [
    new UglifyJsPlugin(/* ... */),
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),//把process.env.NODE_ENV配置成全局变量，可以在项目中区分生产环境或开发环境
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]

-----------------------------分割线---------------------------------

不过在webpack3及以下版本中，要想使用全局使用process.env.NODE_ENV，需要先在启动项目的命令行中配置：

build:set NODE_ENV=production && webpack
//不同的系统配置方式不一样，此处只是windows操作系统的写法

并在webpack.config.js中配置：

module.export = {
plugins:[
 new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV) }
]
}

这样才可以在项目中全局使用process.env.NODE_ENV区分开发环境或生产环境。

另外，官方文档上注明一句话：

image.png

我试了一下，在webpack5.2的版本中，在命令行设置

"build": "set NODE_ENV=production && webpack",

然后在webpack.config.js中,特意把mode和NODE_ENV写成不一样

module.export = {
  mode:'development',
  plugins:[
   new webpack.DefinePlugin({ "process.env.NODE_ENV": J  SON.stringify(process.env.NODE_ENV) }
]
}

然后执行npm run build
发现在页面中打印process.env.NODE_ENV的值为production。
但是页面打包的时候，仍旧相当于启用了development模式 。
这样就印证了文档的那句话：
设置NODE_ENV的值，不会改变mode的值。

参考：
webpack之mode
理解webpack之process.env.NODE_ENV详解