什麼是 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 startnpm 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 的方式有關,主要以自已習慣的方式處理就好。