HTML热更新配置：实现开发阶段修改代码自动刷新浏览器的方案

根本原因是html-webpack-plugin默认不监听template文件变更，需显式配置watchOptions: { poll: 1000 }或使用插件注入监听逻辑，否则修改HTML不会触发重新生成与浏览器刷新。

Webpack 项目里改 HTML 文件不触发刷新，根本不是热更新没开，而是 html-webpack-plugin 默认不监听模板变化。

html-webpack-plugin 不监听 template 文件变更

很多人以为只要配了 webpack-dev-server --hot，改 index.html 就能自动刷新——实际不会。因为 html-webpack-plugin 在 dev 模式下默认只把模板“编译一次”，后续修改不触发重新生成 HTML，也就没有新内容可推给浏览器。

• 它监听的是 entry 和 chunk 变更，不是 template 路径下的文件
• 即使你用 template: './src/index.html'，插件也不会对这个文件加文件监视（watch）
• 结果就是：改 JS/CSS → 刷新；改 HTML → 无反应，必须手动 F5

启用 template 文件监听的两种可靠方式

要让改 HTML 模板也触发刷新，必须显式开启监听。目前只有两个稳定有效的方法：

• 在 html-webpack-plugin 实例中传入 watchOptions: { poll: 1000 }（轮询检测，兼容性最好）
• 或配合 webpack-config-plugins + webpack-watch-files-plugin 手动注入监听逻辑（适合复杂多模板场景）
• 不要依赖 devServer.watchFiles —— 它只影响 HMR 触发，不触发 HTML 重生成

推荐第一种，配置示例如下：

立即学习“前端免费学习笔记（深入）”；

new HtmlWebpackPlugin({  template: './src/index.html',  filename: 'index.html',  watchOptions: {    poll: 1000 // 每秒检查一次 template 是否变化  }})

webpack-dev-server 的 inline 与 hot 参数差异

--inline 和 --hot 常被混用，但作用完全不同：

• --inline：往 bundle 中注入一个客户端脚本，负责连接 dev server 并接收 reload 指令（全页刷新）
• --hot：启用 HMR，只替换模块，不刷新页面（需配合 module.hot.accept() 或框架适配器）
• 纯 HTML + JS 项目，--hot 对 HTML 无效，必须靠 --inline + template 监听才能生效
• 如果用了 React/Vue，--hot 才有意义；否则删掉它，避免误导

Live Server 插件为什么比 webpack-dev-server 更快响应 HTML 修改

VS Code 的 Live Server 插件本质上是轻量 HTTP 服务器 + 文件系统 watcher，它直接监听整个目录的 .html 文件变更，一保存就发 location.reload()，不经过 Webpack 编译流程。

• 无构建延迟，改完 200ms 内刷新
• 不依赖 html-webpack-plugin 配置，也不需要 devServer 选项
• 缺点：无法处理 import、require、CSS-in-JS 等 Webpack 特性，纯静态场景才适用
• 开发中混合使用时，别同时开 Live Server 和 webpack-dev-server，端口冲突且行为不可控

真正卡住人的从来不是“怎么配”，而是误以为 HTML 是 Webpack 的一等公民——它只是个模板，Webpack 不管它变没变，除非你亲手告诉它该看。