Webpack watch 和 watchOptions

Webpack 可以監(jiān)聽文件變化，當(dāng)它們修改后會重新編譯。這個頁面介紹了如何啟用這個功能，以及當(dāng) watch 無法正常運(yùn)行的時候你可以做的一些調(diào)整。

watch

?boolean = false?

啟用 Watch 模式。這意味著在初始構(gòu)建之后，webpack 將繼續(xù)監(jiān)聽任何已解析文件的更改。

webpack.config.js

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

watchOptions

?object?

一組用來定制 watch 模式的選項：

webpack.config.js

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

watchOptions.aggregateTimeout

?number = 20?

當(dāng)?shù)谝粋€文件更改，會在重新構(gòu)建前增加延遲。這個選項允許 webpack 將這段時間內(nèi)進(jìn)行的任何其他更改都聚合到一次重新構(gòu)建里。以毫秒為單位：

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

watchOptions.ignored

?RegExp? ?string? ?[string]?

對于某些系統(tǒng)，監(jiān)聽大量文件會導(dǎo)致大量的 CPU 或內(nèi)存占用。可以使用正則排除像 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')],
  },
};

當(dāng)使用 glob 模式時，我們使用 glob-to-regexp 將其轉(zhuǎn)為正則表達(dá)式，因此，在使用 watchOptions.ignored 的 glob 模式之前，請確保自己熟悉它。

watchOptions.poll

?boolean = false number?

通過傳遞 true 開啟 polling，將會設(shè)置默認(rèn)輪詢間隔為 5007，或者指定毫秒為單位進(jìn)行輪詢。

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    poll: 1000, // 每秒檢查一次變動
  }
};

watchOptions.followSymlinks

根據(jù)軟鏈接查找文件。這通常是不需要的，因?yàn)?webpack 已經(jīng)使用 resolve.symlinks 解析了軟鏈接。

• Type: ?boolean?
• 示例:

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

watchOptions.stdin

當(dāng) stdin 流結(jié)束時停止監(jiān)聽。

• 類型：?boolean?
• 示例：

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

故障排除

如果您遇到任何問題，請查看以下注意事項。對于 webpack 為何會忽略文件修改，這里有多種原因。

發(fā)現(xiàn)修改，但并未做處理

在運(yùn)行 webpack 時，通過使用 --progress 標(biāo)志，來驗(yàn)證文件修改后，是否沒有通知 webpack。如果進(jìn)度顯示保存，但沒有輸出文件，則可能是配置問題，而不是文件監(jiān)視問題。

webpack --watch --progress

沒有足夠的文件觀察者

確認(rèn)系統(tǒng)中有足夠多的文件觀察者。如果這個值太低，webpack 中的文件觀察者將無法識別修改：

cat /proc/sys/fs/inotify/max_user_watches

Arch 用戶，請將 ?fs.inotify.max_user_watches=524288? 添加到 ?/etc/sysctl.d/99-sysctl.conf? 中，然后執(zhí)行 ?sysctl --system?。 Ubuntu 用戶（可能還有其他用戶）請執(zhí)行：?echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p?。

macOS fsevents Bug

在 macOS 中，某些情況下文件夾可能會損壞。請參閱這篇文章。

Windows Paths

因?yàn)?webpack 期望獲得多個配置選項的絕對路徑（如 ?__dirname + '/app/folder'?），所以 Windows 的路徑分隔符 \ 可能會破壞某些功能。

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

Vim

在某些機(jī)器上，Vim 預(yù)先將 backupcopy 選項 設(shè)置為 auto。這可能會導(dǎo)致系統(tǒng)的文件監(jiān)視機(jī)制出現(xiàn)問題。將此選項設(shè)置為 yes 可以確保創(chuàng)建文件的副本，并在保存時覆蓋原始文件。

?:set backupcopy=yes?

在 WebStorm 中保存

使用 JetBrains WebStorm IDE 時，你可能會發(fā)現(xiàn)保存修改過的文件，并不會按照預(yù)期觸發(fā)觀察者。嘗試在設(shè)置中禁用 ?Back up files before saving? 選項，該選項確定在原文件被覆蓋之前，文件是否先保存到臨時位置：取消選中 ?File > {Settings|Preferences} > Appearance & Behavior > System Settings > Back up files before saving?。在一些 webstorm 版本中，該配置項可能會被稱為 "safe write"（首先將更改保存到臨時文件）`。