html-webpack-plugin 默认不支持 HTML 模板热更新，因 template 不参与模块依赖图；需通过插件模式（监听变更+局部刷新）或模块模式（html-loader 引入）使 HTML 成为 Webpack 模块才能触发 HMR。
html-webpack-plugin 本身不支持 HTML 模板的热更新，必须配合 webpack-dev-server 的 HMR 机制和正确配置才能生效。
为什么改了 index.html 不触发热更新？
Webpack 默认只监控入口文件（entry）及其依赖链。HTML 文件若只是作为 html-webpack-plugin 的 template 传入，它不参与模块依赖图，因此修改后不会触发重新编译或 HMR。
- webpack-dev-server 只监听已纳入打包流程的资源，
template路径只是插件读取用的静态路径，不是模块依赖 - 即使启用了
hot: true，没有模块级引用关系，HMR runtime 就收不到变更通知 - 常见现象：
js和css修改立即生效，但改index.html必须手动刷新
两种可靠方案：插件模式 vs 模块模式
本质区别在于「HTML 是否成为 Webpack 的一个模块」。
-
插件模式（推荐）：用
html-webpack-plugin+webpack.HotModuleReplacementPlugin，并确保devServer.hot为true；插件内部会监听template文件变更，并触发整个 HTML 重建 + 页面局部刷新（非全量 reload） -
模块模式：用
raw-loader或html-loader把 HTML 当模块引入，例如在入口index.js中写import html from './index.html'；此时 HTML 进入依赖图，HMR 可直接接管 - 注意：
html-loader默认会解析<img src="xxx">等资源引用，若模板含相对路径图片或 script 标签，需配sources或esmodules: true避免误处理
html-webpack-plugin 配置中容易漏掉的关键项
光装插件、写 template 不够，以下三项缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
devServer.hot: true—— 启用客户端 HMR runtime -
plugins中显式添加new webpack.HotModuleReplacementPlugin()（Webpack 5+ 可省略，但显式写更稳妥） -
html-webpack-plugin实例必须在plugins数组里，且template路径要真实存在、可读；路径错误时无报错，但热更新静默失效 - Webpack 5+ 若使用
mode: 'development'，HotModuleReplacementPlugin已内置，但devServer.hot仍需手动设为true
组件级配置热更新的落地要点
如果目标是让某个 HTML 片段（比如侧边栏模板、弹窗结构）支持独立热更新，而非整页刷新，不能只靠 html-webpack-plugin。
- 把该片段抽成单独的
.html文件，用html-loader引入 JS 模块，再通过innerHTML或replaceChildren()注入 DOM —— 这样片段变更才走 HMR 流程 - 避免直接操作
document.body.innerHTML，否则事件监听器丢失；优先用replaceChildren()（现代浏览器）或封装兼容 fallback - 若片段含
<script>或<style>，html-loader默认不执行它们；需额外用dangerouslyUseInnerHTML: true（不推荐）或拆出独立.js/.css并由 Webpack 管理 - localStorage 缓存模板的方案（如 APP 内嵌页场景）与 Webpack HMR 无关，属于运行时逻辑，需自行监听更新事件并触发 DOM 替换
真正难的不是配置开关，而是让 HTML 变更能进入模块依赖流 —— 这决定了它是“被重建”还是“被替换”。
