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

watch

?boolean = false?

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

webpack.config.js

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

watchOptions

?object?

一組用來(lái)定制 watch 模式的選項(xiàng)：

webpack.config.js

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

watchOptions.aggregateTimeout

?number = 20?

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

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

watchOptions.ignored

?RegExp? ?string? ?[string]?

對(duì)于某些系統(tǒng)，監(jiān)聽(tīng)大量文件會(huì)導(dǎo)致大量的 CPU 或內(nèi)存占用?？梢允褂谜齽t排除像 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'],
  },
};

此外，你還可以指定一個(gè)絕對(duì)路徑：

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

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

watchOptions.poll

?boolean = false number?

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

webpack.config.js

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

watchOptions.followSymlinks

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

• Type: ?boolean?
• 示例:

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

watchOptions.stdin

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

• 類型：?boolean?
• 示例：

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

故障排除

如果您遇到任何問(wèn)題，請(qǐng)查看以下注意事項(xiàng)。對(duì)于 webpack 為何會(huì)忽略文件修改，這里有多種原因。

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

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

webpack --watch --progress

沒(méi)有足夠的文件觀察者

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

cat /proc/sys/fs/inotify/max_user_watches

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

macOS fsevents Bug

在 macOS 中，某些情況下文件夾可能會(huì)損壞。請(qǐng)參閱這篇文章。

Windows Paths

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

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

Vim

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

?:set backupcopy=yes?

在 WebStorm 中保存

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