html-webpack-plugin默认不触发HMR，因为HTML模板是构建产物而非模块依赖链一环；Webpack仅监听import/require引入的JS/CSS等模块，而template配置项修改不会触发重编译或HMR流程。
html-webpack-plugin 为什么默认不触发 HMR？
因为 html-webpack-plugin 生成的 index.html 是构建产物，不是模块依赖链中的一环。Webpack 的 HMR 只监听 JS、CSS 等被 import 或 require 引入的模块，而 HTML 模板文件（如 ./src/index.html）只是插件的配置项，修改它不会触发模块重编译，更不会走 HMR 流程。
如何让 HTML 模板变更也能热更新？
关键在于把模板“变成模块”——让 Webpack 把它当作一个可接受更新的依赖项：
- 在入口 JS 文件（如
src/index.js）里显式import模板文件：import './index.html'（需配合html-loader或raw-loader） - 或使用
html-webpack-plugin的templateParameters+ 动态数据注入方式，再配合module.hot.accept('./src/index.html')手动监听 - 确保
webpack.config.js中已启用devServer.hot: true，且插件未被重复实例化（比如同时用了new webpack.HotModuleReplacementPlugin()和devServer.hot: true，后者已隐含前者）
module.hot.accept('./src/index.html') 不生效的常见原因
这个调用看似简单，但失败率极高，根本原因是路径解析和模块 ID 不匹配：
-
./src/index.html是你写的路径，Webpack 实际解析后可能是./src/index.html?inline或./src/index.html?type=asset（取决于 loader 配置），accept()匹配的是最终模块 ID，不是原始字符串 - 没加 loader：若未配置
html-loader，Webpack 默认不处理 .html 文件，import './index.html'会报错或静默忽略，导致无模块 ID 可 accept - 插件配置覆盖了 HMR：某些老版本
html-webpack-plugin在inject: true模式下会强制重新生成整个 HTML，绕过 HMR 更新逻辑
Vite 下 HTML 热更新更简单，但有隐含前提
Vite 对 HTML 的 HMR 是“开箱即用”的，但仅限于 index.html 根模板；其他 HTML 文件（如路由页、邮件模板）仍需手动 import 才能进入模块图：
立即学习“前端免费学习笔记（深入）”；
- 根
index.html中修改任意内容（<title>、内联 script、class 名等），保存即触发 HMR - 但如果你在
src/pages/about.html里写纯 HTML，Vite 不会监听它——除非你在某个 JS 中import './pages/about.html' - 注意：Vite 的 HMR 不会替换整个 HTML 文档，而是 diff 后 patch DOM 节点，所以直接改
<body>外层结构（比如加个<header>）可能失效，建议只改内部可 diff 的区域
import，就没有模块 ID；没有模块 ID，module.hot.accept 就像对空气喊话。 
