template选项必须是文件路径而非字符串，因插件仅监听真实文件系统变更；正确配置应为相对路径如'./src/index.html'或绝对路径，避免硬编码字符串导致热更新失效。
html-webpack-plugin 的 template 选项必须是文件路径，不是字符串
修改 HTML 模板内容后热更新失效，最常见的原因是 template 配置写成了内联字符串（比如 template: '<div id="app"></div>'）。html-webpack-plugin 只会监听真实文件系统的变更，对硬编码字符串无感知。
正确做法是把模板存为独立文件（如 src/index.html），并在配置中传入路径：
new HtmlWebpackPlugin({<br> template: './src/index.html'<br>})
- 路径必须相对
webpack.config.js所在目录，或用path.resolve()构造绝对路径 - 不能用
__dirname + '/src/index.html'这类拼接——Webpack 5+ 已弃用__dirname在配置中的直接使用 - 如果模板里用了 EJS 语法（如
），确保已安装ejs并启用loader
热更新 HTML 的前提是 webpack-dev-server 监听到 template 文件变化
webpack-dev-server 默认只监控入口 JS 和依赖链中的文件，HTML 模板不在默认监听范围内——但 html-webpack-plugin 会在内部注册 watcher，前提是它能读取到原始模板文件的 fs 路径。
常见断点场景：
- 使用了
html-webpack-template或自定义 EJS 模板，但未在webpack.config.js中显式声明template，插件无法定位源文件 - 模板路径含中文或空格，某些系统 watcher 会静默失败（建议全英文路径）
- 编辑器保存时启用了“延迟写入”或“原子写入”，导致文件系统事件丢失（VS Code 默认开启，可关掉
files.useExperimentalFileWatcher）
多挂载点模板（如 appMountIds）不触发 HTML 热更新？检查是否漏配 inject: false
当使用 appMountIds: ['header', 'main', 'sidebar'] 动态生成多个容器时，html-webpack-plugin 默认仍会往 注入 script 标签。这会导致两个问题：
- 脚本注入位置错乱，HMR runtime 可能加载失败
- 插件无法识别你实际需要的 DOM 结构，热更新后新生成的
<div id="main"></div>与旧节点不匹配，状态丢失
解决方案是显式关闭自动注入，并手动在模板中预留位置：
new HtmlWebpackPlugin({<br> template: './src/index.ejs',<br> inject: false,<br> appMountIds: ['header', 'main', 'sidebar']<br>})
对应模板 index.ejs 中需包含：
<br><div id="<%= id %>"></div><br>
修改 HTML 后页面没变？先确认 devServer.hot 是否为 true，且没被其他插件覆盖
devServer.hot: true 是 HMR 的开关，但它容易被覆盖：
- 某些 CLI 工具（如 Vue CLI）会自动注入自己的
HotModuleReplacementPlugin，若你手动再 new 一个，可能冲突 - Webpack 5+ 默认启用 HMR，但仅限于 JS/CSS；HTML 热更新仍依赖
html-webpack-plugin的 watch 行为，和devServer.hot无直接关系 - 如果用了
webpack-merge合并配置，检查devServer是否被 base 配置里的hot: false覆盖
最简验证方式：改完 HTML 后，打开浏览器开发者工具 → Network 标签页 → 刷新一次，看是否有 index.html?_t=xxx 请求带时间戳参数——有则说明插件已生效；没有，则 watcher 未启动。
真正决定 HTML 是否热更新的，从来不是 HMR 插件本身，而是 html-webpack-plugin 能否把模板变更同步进内存文件系统（webpack-dev-middleware 的内存 FS）。这个环节出问题，页面就永远卡在旧 HTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
