注意：如果我们在命令行中设置环境变量后，比如设置 production 后，如下设置：
export NODE_ENV=production ，那么会在所有的项目下都是正式环境，当我们使用命令 npm install 后下载依赖包时，只会把 package.json中的dependencies依赖项下载下来，对于devDependencies中的依赖包是下载不下来的。
因此我们需要使用上面的命令 unset NODE_ENV 删除刚刚设置的环境变量。
二：理解 DefinePlugin 含义
官网（https://webpack.js.org/plugins/define-plugin/）
官网解释的是：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
1. 什么是cross-env呢？
它是运行跨平台设置和使用环境变量的脚本。
2. 它的作用是啥？
当我们使用 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" }
以上就是深入理解webpack process.env.NODE_ENV配置的详细内容，更多关于webpack process.env.NODE_ENV配置的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: