轉載來源：https://github.com/wfzong/NODE_ENV_TEST，這里還有源碼可以學習，謝謝原作者的分享！
對於process.env.NODE_ENV困惑起因為在配置webpack時，明明配置了：process.env.NODE_ENV為production，如下：
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), new webpack.optimize.UglifyJsPlugin({ compress: process.env.NODE_ENV === 'production' })
但最終並沒有生效，得到的 compress:false，本着有困難就gg的原則，找找找各種文檔，總算理清了其中的關系。
文檔中說：
DefinePlugin 在原始的源碼中執行查找和替換操作，在導入的代碼中，任何出現 process.env.NODE_ENV的地方都會被替換為"production"。因此，形如if (process.env.NODE_ENV !== 'production') console.log('...') 的代碼就會等價於 if (false) console.log('...') 並且最終通過UglifyJS等價替換掉。
也就是說，webpack config文件中定義的變量：
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
是為了你將要打包的文件中用的。 那如何在webpack config文件中使用 process.env.NODE_ENV 呢？答案是corss-env
進入主題
如上信息看着也許很亂，那通過一個實例來一步步驗證一下吧~ 第一步：
npm init
生成一下package.json，然后install需要的模塊：
npm install --save-dev webpack clean-webpack-plugin html-webpack-plugin webpack-merge cross-env
一、接下來進入主題，開始配置 webpack.config.js:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
entry:path.join(__dirname,"src/app.js"),
output:{
path:path.join(__dirname,"dist"),
filename:"bundle.js"
},
plugins:[
new HtmlWebpackPlugin()
]
}
module.exports = config
console.log("process.env.NODE_ENV 的值是(webpack.config.js)："+ process.env.NODE_ENV)
然后新建文件 src/app.js
console.log("app test")
console.log("process.env.NODE_ENV 的值是(app.js)："+ process.env.NODE_ENV)
一切准備好后，給package.json加一行 ："build":"webpack"
"scripts": { "build":"webpack" }
然后執行：npm run build，控制台會有如下輸出：
λ npm run build
> node@1.0.0 build D:\works\test\VUE\NODE_ENV
> webpack
process.env.NODE_ENV 的值是(webpack.config.js)：undefined
Hash: f323df4deba684f859b8
Version: webpack 3.4.1
Time: 589ms
Asset Size Chunks Chunk Names
bundle.js 8.18 kB 0 [emitted] main
index.html 182 bytes [emitted]
[0] ./src/app.js 97 bytes {0} [built]
+ 1 hidden module
Child html-webpack-plugin for "index.html":
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 2 hidden modules
由於沒有進行任何配置，所以上面的輸出中給出的信息是：
process.env.NODE_ENV 的值是(webpack.config.js)：undefined
通過瀏覽器訪問/dist/index.html，控制台有如下信息輸出：
app test process.env.NODE_ENV 的值是(app.js)：undefined
也就是說，在/src/app.js里，process.env.NODE_ENV 也未定義
二、通過webpack -p參數控制
在package.json里增加一行：
"scripts": {
"build":"webpack",
"build-p":"webpack -p"
}
然后執行： npm run build-p 命令行輸出沒有任何變化，任然是：
process.env.NODE_ENV 的值是(webpack.config.js)：undefined
但通過瀏覽器訪問/dist/index.html，控制台有如下信息輸出：
app test process.env.NODE_ENV 的值是(app.js)：production
也就是說，通過webpack -p，然process.env.NODE_ENV值傳遞給app.js了（webpack.config.js並未獲取到~）
三、通過 webpack.DefinePlugin 定義
接着看，假設webpack.config.js是基本定義，針對上線產品，額外定義了webpack.config.prod.js，然后通過webpack-merge合並兩個配置文件webpack.config.prod.js如下：
const webpack = require('webpack') const merge = require('webpack-merge') const config = require("./webpack.config.js") module.exports = merge(config,{ plugins:[ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), new webpack.optimize.UglifyJsPlugin({ compress: process.env.NODE_ENV === 'production' }) ] }) console.log("process.env.NODE_ENV 的值是(webpack.config.prod.js)："+ process.env.NODE_ENV)
可以看到，在這個文件里，我們通過webpack.DefinePlugin定義了process.env.NODE_ENV，現在在package.json里增加一行，並通過--config指定配置文件：
"scripts": {
"build":"webpack",
"build-p":"webpack -p",
"build-prod":"webpack --config webpack.config.prod.js"
},
然后執行：npm run build-prod 命令行里有如下輸出：
process.env.NODE_ENV 的值是(webpack.config.js)：undefined process.env.NODE_ENV 的值是(webpack.config.prod.js)：undefined
通過瀏覽器訪問/dist/index.html，控制台有如下信息輸出：
app test process.env.NODE_ENV 的值是(app.js)：production
這次沒有用webpack -p參數，而是在webpack.config.prod.js里通過webpack.DefinePlugin定義了process.env.NODE_ENV，取得了相當的效果。
四、在config文件里獲取NODE_ENV值
解決了在app.js獲取NODE_ENV的值，如何在webpack配置文件里獲取NODE_ENV的值呢，這樣就可以根據不同的值定義相關的參數了，如上所述，答案是：corss-env，在package.json里增加一行：
"scripts": {
"build":"webpack",
"build-p":"webpack -p",
"build-prod":"webpack --config webpack.config.prod.js",
"build-cross-env":"cross-env NODE_ENV=production webpack"
}
這里執行：npm run build-cross-env，命令行里會得到：
process.env.NODE_ENV 的值是(webpack.config.js)：production
通過瀏覽器訪問/dist/index.html，控制台有如下信息輸出：
app test process.env.NODE_ENV 的值是(app.js)：undefined
可以看到，通過cross-env NODE_ENV=production，然信息傳遞給了webpack的配置文件，但app.js並沒有獲取到。
五、總結
很自然的想到，如果里要在配置文件里和業務代碼里，都獲取到NODE_ENV，那將3、4結合起來：
"scripts": {
"build":"webpack",
"build-p":"webpack -p",
"build-prod":"webpack --config webpack.config.prod.js",
"build-cross-env":"cross-env NODE_ENV=production webpack",
"build-cross-env-with-prod":"cross-env NODE_ENV=production webpack --config webpack.config.prod.js"
}
運行： npm run build-cross-env-with-prod，命令行中有顯示：
process.env.NODE_ENV 的值是(webpack.config.js)：production process.env.NODE_ENV 的值是(webpack.config.prod.js)：production
通過瀏覽器訪問/dist/index.html，控制台有如下信息輸出：
app test process.env.NODE_ENV 的值是(app.js)：production