监视和监视选项

Webpack 可以监视文件并在它们发生更改时重新编译。此页面说明如何启用此功能，以及如果监视无法正常工作，你可以进行的一些调整。

watch

布尔值 = false

开启监视模式。这意味着在初始构建后，webpack 将继续监视任何已解析文件中的更改。

webpack.config.js

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

watchOptions

对象

用于自定义监视模式的一组选项

webpack.config.js

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

watchOptions.aggregateTimeout

number = 20

在第一个文件更改后添加延迟，然后再重新构建。这允许 webpack 将在此时间段内进行的任何其他更改聚合到一次重新构建中。以毫秒为单位传递一个值

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

watchOptions.ignored

RegExp string [string]

对于某些系统，监视许多文件可能会导致大量 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

boolean = false number

通过传递 true 来开启 轮询，这会将默认轮询间隔设置为 5007，或指定以毫秒为单位的轮询间隔

webpack.config.js

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

watchOptions.followSymlinks

在查找文件时跟踪符号链接。通常不需要这样做，因为 webpack 已经使用 resolve.symlinks 解析了符号链接。

• 类型：boolean

• 示例

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

watchOptions.stdin

当 stdin 流结束时停止监视。

• 类型：boolean

• 示例

  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 Bug

在 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 中，此选项可能称为 使用“安全写入”（先将更改保存到临时文件）。