webpack環境變量配置

步驟一：運行跨平臺設置和使用環境變量的腳本

windows不支持NODE_ENV=development的設置方式

當您使用NODE_ENV =production, 來設置環境變量時，大多數Windows命令提示將會阻塞(報錯)。 （異常是Windows上的Bash，它使用本機Bash。）同樣，Windows和POSIX命令如何使用環境變量也有區別。 使用POSIX，您可以使用：$ ENV_VAR和使用％ENV_VAR％的Windows

解決

cross-env使得您可以使用單個命令，而不必擔心爲平臺正確設置或使用環境變量。 只要在POSIX系統上運行就可以設置好，而cross-env將會正確地設置它。
說人話: 這個迷你的包(cross-env)能夠提供一個設置環境變量的scripts，讓你能夠以unix方式設置環境變量，然後在windows上也能兼容運行。

安裝

npm install --save-dev cross-env

使用

"script":{
"dev.simple": "cross-env NODE_ENV=simple webpack-dev-server --open -- 
               config ./webpack.config.dev.js --color"
}

獲取環境變量值

console.log(process.env.NODE_ENV);    //  'simple'

步驟二：藉助 webpack.definePlugin，打包的時候把環境變量注入到代碼中

process 是在 Node 環境的一個全局（Global）對象，對於前端代碼是沒有 process 這個對象的。在「構建進程」中的掛在 `env` 上的的變量，自然在「最終在瀏覽器中執行的前端代碼」中不能用。`DefinePlugin` 允許創建一個在「構建時」可以配置的全局常量，並最終注入到「構建後的前端代碼」中，其實就是弄個「假」的 `process.env.NODE_ENV` 給在瀏覽器中執行的前端代碼用

使用

plugins: [
    new webpack.DefinePlugin({
      IS_DEV: JSON.stringify(true),
      combine: JSON.stringify(process.env.NODE_ENV)
    })
]

最後

代碼中可直接取到 IS_DEV 和 combine 的值