webpack 設定筆記 ✧ 用watch持續監測檔案變化

## 目的 之前 scripts 中的設定內容，是進行單次執行續，意思也就是說，當在進行任何的程式更新後，都需要重新執行一次 start 或 deploy 的指令。 其實這對於開發過程是一件很不方便的事情，因此可以增加「--watch」的指令，要求 webpack 持續偵測檔案內容的變化，並及時完成編譯。 ## 基本設定 檔案名稱：package.json ``` "scripts": { "start": "cross-env NODE_ENV=development webpack", "deploy": "cross-env NODE_ENV=production webpack", "watch": "cross-env NODE_ENV=development webpack --watch" } ``` ## 進階設定 檔案名稱：package.json ``` "scripts": { "start": "cross-env NODE_ENV=development webpack", "deploy": "cross-env NODE_ENV=production webpack", "watch": "npm run start -- --watch" } ``` 以上兩種寫法的結果皆相同，進階寫法是要求執行「start」這個指令，並加載「--watch」執行參數。 這種形況下，如果「start」的指令有有修改時，「watch」會繼承並沿用。 ## 「--」 將「--」放在指令跟參數中間，可以把該參數丟到指令當中，以上方的設定為例： ``` "scripts": { "start": "cross-env NODE_ENV=development webpack", "watch": "npm run start -- --watch" } ``` 中間的「npm run start --」在執行的時候會被置換成「cross-env NODE_ENV=development webpack」，也就變成下方的結果。 ``` "scripts": { "watch": "cross-env NODE_ENV=development webpack --watch" } ``` ## 中斷執行序 在 watch 的狀態下，鍵盤輸入 Ctrl + C 就可以中斷執行。