CD's blog CD's blog
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

CD_wOw

内卷的行情,到不了的梦
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 配置

    • 配置
    • 使用不同语言进行配置(configuration languages)
    • 多种配置类型(configuration types)
    • 入口和上下文(entry and context)
    • 输出(output)
    • 模块(module)
    • 解析(resolve)
    • 插件(plugins)
    • 开发中 Server(devServer)
    • devtool
    • 构建目标(targets)
    • watch 和 watchOptions
      • watch
      • watchOptions
      • watchOptions.aggregateTimeout
      • watchOptions.ignored
      • watchOptions.poll
      • info-verbosity
      • 故障排除
        • 发现修改,但并未做处理
        • 没有足够的文件观察者
      • MacOS fsevents Bug
        • Windows Paths
        • Vim
        • 在 WebStorm 中保存
    • 外部扩展(externals)
    • 性能(performance)
    • Node
    • 统计信息(stats)
    • 其它选项(other options)
  • 指南(实例)

  • 《Webpack》笔记
  • 配置
CD_wOw
2020-12-15
目录

watch 和 watchOptions

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

# watch

type: boolean

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

watch: false
1

webpack-dev-server 和 webpack-dev-middleware里 Watch 模式默认开启。

# watchOptions

type: object

一组用来定制 Watch 模式的选项:

watchOptions: {
  aggregateTimeout: 300,
  poll: 1000
}
1
2
3
4

# watchOptions.aggregateTimeout

type: number

当第一个文件更改,会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位:

aggregateTimeout: 300 // 默认值
1

# watchOptions.ignored

对于某些系统,监听大量文件系统会导致大量的 CPU 或内存占用。这个选项可以排除一些巨大的文件夹,例如 node_modules:

ignored: /node_modules/
1

也可以使用 anymatch (opens new window) 模式:

ignored: "files/**/*.js"
1

# watchOptions.poll

type: boolean, number

通过传递 true 开启 polling (opens new window),或者指定毫秒为单位进行轮询。

poll: 1000 // 每秒检查一次变动
1

如果监听没生效,试试这个选项吧。Watch 在 NFS 和 VirtualBox 机器上不适用。

# info-verbosity

type: string: none info verbose

控制生命周期消息的详细程度,例如 Started watching files(开始监听文件)... 日志。将 info-verbosity 设置为 verbose,还会额外在增量构建的开始和结束时,向控制台发送消息。info-verbosity 默认设置为 info。

webpack --watch --info-verbosity verbose
1

# 故障排除

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

# 发现修改,但并未做处理

在运行 webpack 时,通过使用 --progress 标志,来验证文件修改后,是否没有通知 webpack。如果进度显示保存,但没有输出文件,则可能是配置问题,而不是文件监视问题。

webpack --watch --progress
1

# 没有足够的文件观察者

确认系统中有足够多的文件观察者。如果这个值太低,webpack 中的文件观察者将无法识别修改:

cat /proc/sys/fs/inotify/max_user_watches
1

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 中,某些情况下文件夹可能会损坏。请参阅这篇文章 (opens new window)。

# Windows Paths

因为 webpack 期望获得多个配置选项的绝对路径(如 __dirname + "/app/folder"),所以 Windows 的路径分隔符 \ 可能会破坏某些功能。

使用正确的分隔符。即 path.resolve(__dirname, "app/folder") 或 path.join(__dirname, "app", "folder")。

# Vim

在某些机器上,Vim 预先将 backupcopy 选项 (opens new window) 设置为 auto。这可能会导致系统的文件监视机制出现问题。将此选项设置为 yes 可以确保创建文件的副本,并在保存时覆盖原始文件。

:set backupcopy=yes.
1

# 在 WebStorm 中保存

使用 JetBrains WebStorm IDE 时,你可能会发现保存修改过的文件,并不会按照预期触发观察者。尝试在设置中禁用安全写入(safe write)选项,该选项确定在原文件被覆盖之前,文件是否先保存到临时位置:取消选中 File > Settings... > System Settings > Use "safe write" (save changes to a temporary file first)。

编辑 (opens new window)
#Webpack
上次更新: 2021/08/22, 01:09:59
构建目标(targets)
外部扩展(externals)

← 构建目标(targets) 外部扩展(externals)→

最近更新
01
gsap动画库学习笔记 - 持续~
06-05
02
远程组件加载方案笔记
05-03
03
小程序使用笔记
03-29
更多文章>
Theme by Vdoing | Copyright © 2020-2023 CD | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式