根本原因是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 不管它变没变，除非你亲手告诉它该看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
