webpack 開發環境 process.env.NODE_ENV

（一）.概述

在工作中，根據開發環境不同，設置不同的變量、參數、和引入依賴，使打包更加的自動化，一勞永逸

藉助於 process.env.NODE_ENV 可以使我們區分開發環境

查看環境變量
1.安裝nodejs
2.通過終端（cmd），輸入node，進入編輯模式
3.輸入process+回車, 顯示進程
4.輸入process.env+回車，顯示 當前環境（environment）
5.輸入process.env.NODE_ENV+回車，顯示’undefined’
說明 process.env.NODE_ENV 不是系統默認選項，是人爲後續加入的一個自定義項

因此我們需要先設置 process.env.NODE_ENV

（二）.開始設置

1.npm init -y 先初始化一個默認的包配置
2.在生成的package.json中，對scripts添加新指令
windows和posix命令如何使用環境變量存在差異

scripts:{
  "dev" : "set NODE_ENV=production webpack"
}

scripts:{
  "dev" : "NODE_ENV=production webpack"
}

所以需要藉助於第三方包，來解決這個問題

（三）.cross-env (解決不同系統之前的命令兼容問題)

說明：官方文檔
cross-env makes it so you can have a single command without worrying about setting or using the environment variable properly for the platform.
Just set it like you would if it’s running on a POSIX system,
and cross-env will take care of setting it properly.

cross env使您可以使用單個命令，而不必擔心爲平臺正確設置或使用環境變量。
只要像在POSIX系統上運行時那樣設置它，
cross env就會負責正確設置它。

安裝：

npm install cross-env -D

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack"
  }
}

（四）.完成設置與驗證

安裝完 cross-env 在package.json中，定義2個指令，一個開發，一個生產，將NODE_ENV完成設置

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack --progress --colors",
  "build": "cross-env NODE_ENV=production webpack"
}

在webpack.config.js（沒有就新建一個官當文檔配置）中，設置log驗證一下

let env = process.env.NODE_ENV;
console.log(env);  

終端輸入npm run dev，log輸出信息 “development”
終端輸入npm run build，log輸出信息 “production”

驗證完畢，process.env.NODE_ENV設置好了

（五）.將process.env.NODE_ENV全局化

如果在業務代碼中，需要根據開發環境，動態改變數據請求地址，會更加自動化
所以不僅僅在打包配置中我們需要使用 process.env.NODE_ENV
在其他模塊中，仍要使用它，則需要將其全局化
在webpack.config.js中

...
const webpack = require('webpack');
...
plugins: [
    new webpack.DefinePlugin({
       "process.env.NODE_ENV" : (JSON.stringify(process.env.NODE_ENV+'_aaaaa'))
    })
]
...

上面爲了驗證，加了無用字符串’_aaaaa’ 加以明確
驗證：在一個子組件中，created時候輸出log

（六）.總結

1.安裝 cross-env 指令系統兼容包

npm install cross-env -D

2.在package.json中配置指令

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack --progress --colors",
  "build": "cross-env NODE_ENV=production webpack"
}

3.在webpack.config.js中，全局化process.env.NODE_ENV

...
const webpack = require('webpack');
...
plugins: [
    new webpack.DefinePlugin({
       "process.env.NODE_ENV" : (JSON.stringify(process.env.NODE_ENV+'_aaaaa'))
    })
]
...

4.根據開發環境，DIY自己業務邏輯
在webpack.config.js中，根據process.env.NODE_ENV自行配置引用依賴邏輯
在子模塊中，根據process.env.NODE_ENV調整數據請求連接
使得項目更加自動化