理解webpack中的process.env.NODE_ENV

什么是process?

process是node的全局变量，这个变量有一个env属性。任意创建一个js文件（index.js）
,打印process变量（console.log(process)),使用node环境运行：

node index.js

可以看到process的内容：

process.env.NODE_ENV的作用

• 这个变量不是process.env本来就有的，是通过设置得到的。
• 通过这个变量可以判断我们环境是开发环境还是生成环境

如何配置process.env.NODE_ENV

在webpack4中可以通过mode来配置：

• 如果是development：mode:“development”
• 如果是production: mode:“production”
  默认情况下webpack会将production作为mode的默认值。

在webpack3或者以下，就需要使用插件webpack自带插件DefinePlugin来配置。

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

与启动命令结合

"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"
}

理解 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"
  }