未編譯程式碼來源檔每次撰寫後,都需要在終端機執行 npm 指令

在 index.js 等相關未編譯程式碼來源檔,在每次撰寫後都要在終端機下 npm run start 執行 webpack 編譯,這樣的方式沒效率外也較麻煩。


設定 package.json 的 npm 自定指令 watch

透過 npm scripts 自定 watch 指令,監視未編譯程式碼來源檔的更動,
package.json 檔中的 "scripts": {} 物件中多加入 "watch": 指令,主要由 "start": "cross-env NODE_ENV=development webpack", 修改指令名稱就好,而在後面的 npm 執行參數多加 --watch,修改後如下。


執行 npm watch 指令讓 webpack 不停止編譯動作

npm 指令 --watch 參數,是用來與 webpack 的執行緒告知不中斷執行開發模式的編譯動作,也就是終端機使用指令 npm run watch 跳出輸入指令的狀態。

接著在到 src/index.js 檔案中另外輸入新的程式碼,將該檔存檔後就又會動新執行 webpack 的編譯動作。


使用 Ctrl + C 組合鍵讓 npm wathc 狀態停止

每當存檔或更動完未編譯程式碼來源檔後,都會自動讓 webpack 執行開發模式的編譯動作,也一直讓執行緒處於不中斷的狀態,如果要執行緒跳出使用 Ctrl + C 組合鍵,就可讓 watch 停止下來。