[webpack4] 理解 webpack之process.env.NODE_ENV详解

理解 webpack之process.env.NODE_ENV详解

原谅链接： 理解webpack之process.env.NODE_ENV详解(十八)

在 node 中，有全局变量 process 表示的是当前的 node 进程。process.env 包含着关于系统环境的信息。但是 process.env 中并不存在 NODE_ENV 这个东西。NODE_ENV 是用户一个自定义的变量，在 webpack 中它的用途是判断生产环境或开发环境的依据。

为了查看 process 的基本信息，我们可以在文件夹中新建一个 process.js 文件，在里面加一句代码：console.log(process); 然后进入该文件夹，执行node process.js可以在命令行中打印如下信息：

process {
  title: 'node',
  version: 'v10.13.0',
  versions:
   { http_parser: '2.8.0',
     node: '10.13.0',
     v8: '6.8.275.32-node.36',
     uv: '1.23.2',
     zlib: '1.2.11',
     ares: '1.14.0',
     modules: '64',
     nghttp2: '1.34.0',
     napi: '3',
     openssl: '1.1.0i',
     icu: '62.1',
     unicode: '11.0',
     cldr: '33.1',
     tz: '2018e' },
  arch: 'x64',
  platform: 'darwin'
  ...
 }

如上就可以看到 process 是 node 的全局变量，并且 process 有 env 这个属性，但是没有 NODE_ENV 这个属性。
process.env属性返回的是一个包含用户环境信息的对象，它可以区分开发环境或正式环境的依据，那么我们如何配置环境变量呢？

如何配置环境变量

直接在 cmd 环境配置即可，查看环境变量，添加环境变量，删除环境变量等操作。

windows 环境配置如下

#node中常用的到的环境变量是NODE_ENV，首先查看是否存在 
set NODE_ENV 

#如果不存在则添加环境变量 
set NODE_ENV=production 

#环境变量追加值 set 变量名=%变量名%;变量内容 
set path=%path%;C:\web;C:\Tools 

#某些时候需要删除环境变量 
set NODE_ENV=

Linux 配置(mac系统环境也属于这个)

#node中常用的到的环境变量是NODE_ENV，首先查看是否存在
echo $NODE_ENV

#如果不存在则添加环境变量
export NODE_ENV=production

#环境变量追加值
export path=$path:/home/download:/usr/local/

#某些时候需要删除环境变量
unset NODE_ENV

#某些时候需要显示所有的环境变量
env

理解 DefinePlguin 含义

官网解释的是：DefinePlugin 允许我们创建全局变量，可以在编译时进行设置，因此我们可以使用该属性来设置全局变量来区分开发环境和正式环境。这就是 DefinePlugin 的基本功能。

因此我们可以在 webpack.config.js 中添加如下代码配置全局变量信息了，因为当 webpack 进行编译的时候会全局设置变量; 如下代码：

module.exports = {
  plugins: [
    // 设置环境变量信息
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('5fa3b9'),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: '1+1',
      'typeof window': JSON.stringify('object'),
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
}

package.json 打包配置如下命令：

"scripts": {
  "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
},

这样配置完成后，为了验证一下是否是全局变量，运行npm run dev打包后，我们可以在我们项目中入口 js 文件，打印下即可：

console.log('Running App version ' + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印 { NODE_ENV: undefined }

如上信息可以看到process.env.NODE_ENV打印为 undefined，那是因为我们在package.json文件中未进行配置。下面我们把package.json加上 NODE_ENV 变量值，代码打包命令变成如下：

"scripts": {
  "dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
},

如上打包命令，在 dev 打包命令上，前面加上了 NODE_ENV=development 命令，在 build 打包命令上前面加上了 NODE_ENV=production，因此继续查看代码结果变为如下：

console.log('Running App version ' + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印 { NODE_ENV: 'development' }

可以看到这个时候 process.env.NODE_ENV才有值，因此在项目打包中，为了区分开发环境和正式环境我们像如上配置即可，然后在webpack.config.js中通过 process.env.NODE_ENV这个来区分正式环境还是开发环境即可。

理解 cross-env

什么是 cross-env 呢？

它是运行跨平台设置和使用环境变量的脚本。

它的作用是啥？

当我们使用NODE_ENV = production 来设置环境变量的时候，大多数windows 命令会提示将会阻塞或者异常，或者，windows 不支持 NODE_ENV=development的这样的设置方式，会报错。因此cross-env出现了。我们就可以使用cross-env命令，这样我们就不必担心平台设置或使用环境变量了。也就是说cross-env 能够提供一个设置环境变量的 scripts，这样我们就能够以 unix 方式设置环境变量，然而在 windows 上也能够兼容的。

要使用该命令的话，我们首先需要在我们的项目中进行安装该命令，安装方式如下：

npm install --save-dev cross-env

然后在 package.json 中的 scripts 命令更改如下：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
}