了解process.env.NODE_ENV

1. process

首先process是nodeJS中的全局对象global上的一个进程属性。env是process上的一个代表环境变量的属性，所有设置的环境变量都可以通过该属性读取。

2. NODE_ENV

NODE_ENV是一个常量名。它的独特点是，在webpack4.0+中，打包配置文件中有个属性：

mode: "production" 或者 mode: "development"

实质上是暗中完成了一个自定义变量设置：

plugins: [
    new webpack.definePlugin({
      'process.env.NODE_ENV': JSON.stringify("production") // 或者 "development"
    }),
    ...
]

在webpack4.0之前的版本中一般是在package.json的scripts中命令中设置NODE_ENV的值。

注意：其中cross-env是为了兼容windows和OS系统中设置环境的兼容问题。

"start": "cross-env NODE_ENV=development webpack-dev-server --open --config webpack.dev.js",    
"build": "cross-env NODE_ENV=production webpack --config webpack.prod.js"

然后在手动定义变量：

plugins: [
    new webpack.definePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    ...
]

3. process.env.(变量)

脚本中还可以设置其他变量。通过process.env.变量名读取。但是该变量只能在webpack.config.js的打包文件中读取到。因为该文件是通过打包命令webpack webpack.config.js运行的。而webpack的依赖包中的bin文件中声明头如下：

#!/usr/bin/env node

表示该文件是在node环境中运行的，所以该文件可以读取到node的进程变量

而我们在ReactJS中写的其他业务代码是读取不到该变量的。只能通过definePlugin插件进行全局的变量定义。然后就可以读取到了。

而webpack4-中，NODE_ENV定义的变量名为'process.env.NODE_ENV', 名称正好和node环境中的process.env重合。