Webpack watch 和 watchOptions

2023-05-16 15:19 更新

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"(首先將更改保存到臨時文件)`。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號