production (生產模式) 與 development (開發模式)

警告提示 production (生產模式) 與 development (開發模式) 的大意

在原先輸入 npm run start 指令執行後，會終端機會出現下面的提示。

裡面提示的大意是指，使用 webpack 時需要設定編譯的模式，而預設的模式是 production (生產模式)，而此模式指的是上線使用的模式，另外 development (開發模式) 指的是開發中版本。

production (生產模式) 與 development (開發模式) 的差別與使用

production (生產模式) 的處理主要是針對處理程式碼優化、壓縮等等功能，執行處理上因為有再處理過會比較慢。而在 development (開發模式) 不需要處理程式碼優化、壓縮等等功能，執行處理上會比較快。

package.json 的 npm 指令設定 development 開發模式指令

官網上有推薦設定方式 mode > usage，在 webpack.config.js 檔中的 module.exports = {} 中多加入 mode: 'development', 的設定，而這樣會需要每次手動的修改會比較麻煩，這樣比較不推薦參照設定與使用。

package.json 的 npm 指令設定 development 開發模式指令

這裡直接進入到 package.json 檔中，先前的設定是 "start": "webpack" 的 npm 指令設定，而這樣執行 webpack 的方式是使用的是預設 production 的模式，所以在此設定所使用的 dev 開發模式，在 "webpack" 字串的部份多加入 --mode development，修改成 "start": "webpack --mode development" 後輸入執行指令 npm run dev 後，就不會出現使用模式的警告提示。

查看到 dist/index-bundle.js 的編譯後檔案，會以原先執行編譯的檔案不太一樣，會有這多 webpack 執行處理的程式碼與註解，與預設 production (生產模式) 上線時的程式碼不太一樣，只會出現單行而沒有其他註解。

package.json 的 npm 指令設定 production 生產模式指令

同樣的在 package.json 檔中，要設定 npm 執行生產模式指令，在 "scripts": {} 物件中多加入 "deploy": "webpack --mode production"。

加入完成後在終端機下輸入指令 npm run deploy，執行輸出後就只會處理成單一行。

目前的開發與生產模式設定如下。

在 package.json 自定 webpack 的 npm 執行指令 "scripts": {} 的物件內，最後一筆設定後方不要加入 ,，會照成執行指令的錯誤。