Watch 和 WatchOptions

Webpack 能够监听文件并在文件发生变化时重新编译。本页面解释了如何启用此功能，以及在监听功能无法正常工作时可以进行的一些调整。

watch

boolean = false

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

webpack.config.js

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

watchOptions

object

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

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 来开启轮询，这将把默认轮询间隔设置为 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 option 选项设置为 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 中，此选项可能被称为 Use "safe write" (save changes to a temporary file first)。