什麼是 NODE_ENV

簡單來說 NODE_ENV= 指的就是 node.js 提供的環境變數，用來傳送參數使用。

原先的 webpack.config.js 檔中的的進入點 (entry) 路徑與輸出路徑 (output) 執行編譯模式，透過 package.json 檔使用 --mode development 與 --mode production 來對應 npm 指令執行編譯對應生產或是開發版本。

但在執行的過程中，要讓 webpack.config.js 檔中也知道是生產或是開發版本時，在 package.json 檔執行時帶入變數到 webpack 裡，而這樣才可以讓 webpack 執行對應的生產或是開發版本，所以就需要 NODE_ENV 帶入設定，接著要了解就需要使用下面的做法。

安裝 cross-env

什麼是 npm cross-env
運行跨平台設置和使用環境變量 (Node中的環境變量) 的腳本。
但若該專案會跨作業系統（即，windows）使用，建議搭配套件 cross-env 使用，只需要 package.json 中執行程式的指令前加上 cross-env。
可參考 對cross-env的理解 文章。

先需要執行 npm 安裝 cross-env 套件，執行指令如下

執行完 npm 安裝指令後，確任 package.json 檔裡的 "devDependencies": {} 中是不是有 "cross-env": "^x.x.x", 的內容，如果有的話就是將 cross-env 確任安裝完成。

package.json 裡的 “scripts”: {} 中，在執行模式使用 NODE_ENV= 將 webpack 模式以 node.js 傳入使用

設定 package.json 裡的 “scripts”: {}，加入 NODE_ENV=

直接在 package.json 檔中，透過指令執行的部份加入 NODE_ENV=development (開發環境) 或是 NODE_ENV=production (生產環境) 的指令參數，透過 NODE_ENV= 後方可以指定 webpack 的對應編譯版本，分別在 "scripts": {} 物件中的指令，加入 NODE_ENV= 的環境變數，加入後如下。

process.env.NODE_ENV 取得 package.json 執行 webpack 指令傳入 node.js 環境變數

在 webpack.config.js 檔中使用 console.log("process.env.NODE_ENV:", process.env.NODE_ENV) 查看執行結果。

在 PC windows 的終端機指令出現的錯誤

上方的部份設定完成後，終端機內使用指令 npm run start 執行開發環境編譯，但會出現下面的錯誤訊息。

裡面寫著 'NODE_ENV' 不是內部或是外部命令...，這個部份如果是在 MacOS 的系統下是可以正常運作，但在 windows 下是無法執行。
如果是 windows 系統的話，就需要在 package.json 執行 webpack 指令的 "scripts": {} 中的個別指令下，裡面的 NODE_ENV=<webpack mode> 前上補上 cross-env。

主要是 windows 系統環境中沒有 NODE_ENV 的變數設定，也導致 windows 在執行 npm 時會產生錯誤。
在 windows 下透過 cross-env 套件執行 npm 指令，才能讓 NODE_ENV 的變數設定正常執行，修改後如下。

在 MacOS 下就可以不使用 cross-env 套件直接執行 NODE_ENV 的變數。

windows 在 NODE_ENV= 前方加入 cross-env 後，輸入 npm 指令 npm run start 查看 webpack.config.js console.log(process.env.NODE_ENV) 的顯示結果，會出現 development 表示將 node.js 的環境變數 NODE_ENV 透過 cross-env 正常傳入 webpack 中使用。

使用 NODE_ENV 的方式執行 webpack 編譯模式

NODE_ENV 透過編譯環境判斷式，條件成立後執行後續內容

NODE_ENV 可以透過 JavaScript 的 if() 判斷式來確任編譯環境，透過條件判斷成立下下才可以後續的動作。

module.exports = {} 的 mode: 設定使用 process.env.NODE_ENV，以 node.js 的環境變數指定 webpack 執行 webpack 編譯環境

在 webpack.config.js 中的 module.exports = {} 物件中加入設定中，另外加入 mode: process.env.NODE_ENV。

使用 mode: process.env.NODE_ENV 來傳入 node.js 的 NODE_ENV 環境變數。

要使用此方法除了設定 webpack.config.js 外，也需要到 package.json 中將 --mode <執行編譯模式> 移除，不需要再讓 webpack 傳入運行模式。

以上設定完成後，接著使用指令 npm run start 與 npm run deploy 查看 index-bundle.js 的執行結果。


使用指令 npm run start 執行 webpack 後，也一樣沒有出現警告。

接著開啟 dist/index-bundle.js 檔案，也確實為 webpack 開發模式下的輸出檔。

再接著使用指令 npm run start 讓 webpack 執行生產模式打包檔案，這裡可以看到對確任處理成單一行的壓縮程式碼。

依自已習慣選擇使用 NODE_ENV 的方式或是 npm scripts 自定指令參數 –mode 方式，執行 webpack 編譯模式

npm scripts 自定指令參數 --mode 方式執行 webpack 編譯與 NODE_ENV 的方式執行 webpack 編譯模式與個人設定 webpack.config.js 的方式有關，主要以自已習慣的方式處理就好。