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

很多开发者都踩过同一个坑：明明配了 webpack-dev-server --hot，改完 index.html 保存，浏览器一动不动。下意识以为是热更新没开，折腾半天才发现——问题根本不在热更新，而是 html-webpack-plugin 默认对模板文件“视而不见”。

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

你可能会费解：明明已经指定了 template: './src/index.html'，为什么改了它还是不触发刷新？关键在于 html-webpack-plugin 在开发模式下只会把模板“编译一次”，后续修改根本不会触发 HTML 重新生成。它默认监听的是 entry 和 chunk 的变化，并不关心 template 路径下的文件有没有改动。于是出现了一个极其分裂的现象：改 JS/CSS 能自动刷新，改 HTML 就不行，只能手动按 F5。

• 它只对入口文件和依赖模块做文件监视（watch）
• 即使你明确指定了模板路径，插件也不会自动添加监听
• 最终结果就是：改模板？无响应。

启用 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 会在打包产物中注入一个客户端脚本，专门负责与 dev server 通信并接收全页刷新的指令。简单说，它管的是“通知浏览器刷新”。
• --hot 启用的是 HMR 机制——只替换发生变化的模块，不刷新整个页面。前提是代码里必须写了 module.hot.accept() 或者使用了框架的适配器。
• 对于纯 HTML + JS 项目，--hot 对 HTML 修改毫无效果。想要 HTML 改完自动刷新，必须靠 --inline 配上模板监听才能生效。
• 如果项目用了 React 或 Vue，--hot 才有实际意义；否则干脆关掉它，省得误导自己。

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

VS Code 的 Live Server 插件之所以“秒刷”HTML，是因为它的设计截然不同。它本质是一个轻量 HTTP 服务器 + 文件系统 watcher，直接监听整个目录下所有 .html 文件的变动，一保存就立刻发 location.reload()，完全不经过 Webpack 的编译管道。

• 没有构建延迟，保存后 200ms 内就能看到效果
• 不需要配置 html-webpack-plugin，也不需要折腾 devServer
• 但它的局限也很明显：无法处理 import、require、CSS-in-JS 这类 Webpack 强依赖的特性，只适合纯静态页面的开发场景
• 开发中如果混用，千万别同时开着 Live Server 和 webpack-dev-server——端口冲突还是小事，浏览器里两个 watcher 互相打架，行为完全不可控

说到底，真正卡住人的不是“怎么配”这个操作，而是很多人默认 HTML 是 Webpack 的一等公民——它只是个模板，Webpack 根本不管它变没变，除非你亲手告诉它“喂，盯着点这里”。