監控和監控選項

Webpack 可以監控檔案，並在檔案變更時重新編譯。此頁面說明如何啟用此功能，以及在監控無法正常運作時可以進行的調整。

watch

布林值 = false

開啟監控模式。這表示在初始編譯後，webpack 將持續監控任何已解析檔案的變更。

webpack.config.js

module.exports = {
  //...
  watch: true,
};

watchOptions

物件

用於自訂監控模式的一組選項

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 200,
    poll: 1000,
  },
};

watchOptions.aggregateTimeout

數字 = 20

在第一個檔案變更後，加入一段延遲時間，再進行重新建置。這允許 webpack 在這段時間內將其他任何變更彙整成一次重新建置。傳遞一個毫秒數值

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 600,
  },
};

watchOptions.ignored

RegExp 字串 [字串]

對於某些系統而言，監控許多檔案可能會導致大量的 CPU 或記憶體使用量。可以使用正規表示法排除一個巨大的資料夾，例如 node_modules

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: /node_modules/,
  },
};

或者，可以使用 glob 模式

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: '**/node_modules',
  },
};

也可以使用多個 glob 模式

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: ['**/files/**/*.js', '**/node_modules'],
  },
};

此外，您可以指定一個絕對路徑

const path = require('path');
module.exports = {
  //...
  watchOptions: {
    ignored: [path.posix.resolve(__dirname, './ignored-dir')],
  },
};

在使用 glob 模式時，我們會使用 glob-to-regexp 將它們轉換成正規表示法，因此請務必在將 glob 模式用於 watchOptions.ignored 之前熟悉它。

watchOptions.poll

布林值 = false 數字

傳遞 true 來開啟 輪詢，這會將預設輪詢間隔設定為 5007，或指定一個以毫秒為單位的輪詢間隔

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    poll: 1000, // Check for changes every second
  },
};

watchOptions.followSymlinks

尋找檔案時，追蹤符號連結。通常不需要，因為 webpack 已透過 resolve.symlinks 解決符號連結。

• 類型：布林值

• 範例

  module.exports = {
    //...
    watchOptions: {
      followSymlinks: true,
    },
  };

watchOptions.stdin

stdin 串流結束時停止監控。

• 類型：布林值

• 範例

  module.exports = {
    //...
    watchOptions: {
      stdin: true,
    },
  };

疑難排解

如果您遇到任何問題，請參閱下列注意事項。webpack 可能遺漏檔案變更的原因有很多。

看到變更但未處理

透過使用 --progress 標記執行 webpack 來驗證 webpack 是否未收到變更通知。如果在儲存時顯示進度，但未輸出任何檔案，則可能是組態問題，而不是檔案監控問題。

webpack --watch --progress

監控器不足

驗證您的系統中是否有足夠的可用監控器。如果此值太低，Webpack 中的檔案監控器將無法辨識變更

cat /proc/sys/fs/inotify/max_user_watches

Arch 使用者，將 fs.inotify.max_user_watches=524288 新增到 /etc/sysctl.d/99-sysctl.conf，然後執行 sysctl --system。Ubuntu 使用者（可能還有其他使用者），執行：echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p。

macOS fsevents 錯誤

在 macOS 上，資料夾在某些情況下可能會損毀。請參閱 這篇文章。

Windows 路徑

由於 webpack 預期許多組態選項使用絕對路徑，例如 __dirname + '/app/folder'，Windows 的 \ 路徑分隔符號可能會損壞某些功能。

使用正確的分隔符號。例如 path.resolve(__dirname, 'app/folder') 或 path.join(__dirname, 'app', 'folder')。

Vim

在某些機器上，Vim 預先設定為 backupcopy 選項 設為 auto。這可能會導致系統檔案監控機制出現問題。將此選項切換為 yes 將確保檔案的副本建立完畢，並在儲存時覆寫原始檔案。

:set backupcopy=yes

在 WebStorm 中儲存

使用 JetBrains WebStorm IDE 時，您可能會發現儲存已變更的檔案並未觸發監控器，這與您的預期不同。請嘗試在設定中停用 在儲存前備份檔案 選項，此選項決定檔案是否先儲存到暫時位置，再覆寫原始檔案：取消選取 檔案 > {設定|喜好設定} > 外觀與行為 > 系統設定 > 在儲存前備份檔案。在某些版本的 Webstorm 中，此選項可能稱為 使用「安全寫入」（先將變更儲存到暫時檔案）。