watch 和 watchOptions |
您所在的位置:网站首页 › alvays的意思 › watch 和 watchOptions |
Webpack 可以监听文件变化,当它们修改后会重新编译。这个页面介绍了如何启用这个功能,以及当 watch 无法正常运行的时候你可以做的一些调整。 watchboolean = false 启用 Watch 模式。这意味着在初始构建之后,webpack 将继续监听任何已解析文件的更改。 webpack.config.js module.exports = { //... watch: true, };tipwebpack-dev-server 和 webpack-dev-middleware 里 Watch 模式默认开启。 watchOptionsobject 一组用来定制 watch 模式的选项: webpack.config.js module.exports = { //... watchOptions: { aggregateTimeout: 200, poll: 1000, }, };watchOptions.aggregateTimeoutnumber = 20 当第一个文件更改,会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位: module.exports = { //... watchOptions: { aggregateTimeout: 600, }, };watchOptions.ignoredRegExp 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 模式之前,请确保自己熟悉它。 tip如果你使用 require.context,webpack 会监听你的整个目录。你应该忽略一些文件和/或(and/or)目录,以便那些不需要监听的文件修改后不会触发重新构建。 watchOptions.pollboolean = false number 通过传递 true 开启 polling,将会设置默认轮询间隔为 5007,或者指定毫秒为单位进行轮询。 webpack.config.js module.exports = { //... watchOptions: { poll: 1000, // 每秒检查一次变动 } };tip如果监听没生效,试试这个选项吧。这会对 VirtualBox、WSL、Containers 或者 Docker 有所帮助。在这些情况下,使用轮询间隔并忽略 /node_modules/ 这样的大文件夹,以保持最小的 CPU 使用率。 watchOptions.followSymlinks根据软链接查找文件。这通常是不需要的,因为 webpack 已经使用 resolve.symlinks 解析了软链接。 Type: boolean Example: 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_watchesArch 用户,请将 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"(首先将更改保存到临时文件)`。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |