Webpack watch 和 watchOptions

Webpack 可以监听文件变化，当它们修改后会重新编译。这个页面介绍了如何启用这个功能，以及当 watch 无法正常运行的时候你可以做的一些调整。

watch

​boolean = false​

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

webpack.config.js

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

watchOptions

​object​

一组用来定制 watch 模式的选项：

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 将其转为正则表达式，因此，在使用 watchOptions.ignored 的 glob 模式之前，请确保自己熟悉它。

watchOptions.poll

​boolean = false number​

通过传递 true 开启 polling，将会设置默认轮询间隔为 5007，或者指定毫秒为单位进行轮询。

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    poll: 1000, // 每秒检查一次变动
  }
};

watchOptions.followSymlinks

根据软链接查找文件。这通常是不需要的，因为 webpack 已经使用 resolve.symlinks 解析了软链接。

• Type: ​boolean​
• 示例:

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

watchOptions.stdin

当 stdin 流结束时停止监听。

• 类型：​boolean​
• 示例：

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

故障排除

如果您遇到任何问题，请查看以下注意事项。对于 webpack 为何会忽略文件修改，这里有多种原因。

发现修改，但并未做处理

在运行 webpack 时，通过使用 --progress 标志，来验证文件修改后，是否没有通知 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 Paths

因为 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 时，你可能会发现保存修改过的文件，并不会按照预期触发观察者。尝试在设置中禁用 ​Back up files before saving​ 选项，该选项确定在原文件被覆盖之前，文件是否先保存到临时位置：取消选中 ​File > {Settings|Preferences} > Appearance & Behavior > System Settings > Back up files before saving​。在一些 webstorm 版本中，该配置项可能会被称为 "safe write"（首先将更改保存到临时文件）`。