html-webpack-plugin默认不生成带内容的HTML入口文件，必须显式配置template路径（推荐绝对路径）和chunks（如['main', 'vendor']），否则仅生成空壳HTML；模板中需含注入点（如<%= htmlWebpackPlugin.options.title %>），且devServer需额外配置watchFiles监听模板变更。
html-webpack-plugin 默认不生成带内容的 HTML 入口文件——它只在你明确告诉它“用哪个模板”时才真正干活。空 index.html、没注入 JS/CSS、刷新不更新模板，90% 都是因为配置漏了关键项。
必须显式传 template，否则就是空壳
插件不会自动扫描项目里有没有 index.html；不设 template，它就用内置空模板，生成的 HTML 有结构但没内容，连 <body></body> 都可能为空。
- 写死路径：用
path.resolve(__dirname, 'src/index.ejs')，别用相对路径'./src/index.html'（某些 CLI 封装下会失效） - 模板里至少留一个注入点：
<%= htmlWebpackPlugin.files.chunks.main.entry %>或更简单的<%= htmlWebpackPlugin.options.title %>，能确认模板被解析 - 别混用注释风格：EJS 模板里写
<!-- inject -->没用，那是webpack-dev-server的语法，html-webpack-plugin不认
chunks 配置决定哪些 JS 被注入
默认只注入 main 入口 chunk。如果你用了 optimization.splitChunks 拆出 vendor、polyfill，它们不会自动出现。
- 手动列全：
chunks: ['main', 'vendor', 'polyfill']，顺序 = script 标签顺序 -
chunks: 'all'看似省事，但会把异步 chunk（比如import()动态加载的）也塞进去，生产环境容易误加载 - 想排除某个 chunk？在
splitChunks.cacheGroups里设enforce: true，再配合chunks: 'initial'
多页面时 public 资源路径容易错乱
比如 public/favicon.ico 在 admin.html 里变成 /admin/favicon.ico，404。这是因为插件按输出 HTML 路径推导 public 前缀，但没考虑多页场景。
立即学习“前端免费学习笔记（深入）”；
- 统一加
publicPath: '/'到 Webpack 的output配置中 - 或者在每个
HtmlWebpackPlugin实例里加favicon: 'public/favicon.ico'，路径写死为绝对路径 - 避免依赖
htmlWebpackPlugin.files.publicPath—— 它在多页下行为不稳定
改了模板文件，devServer 不热更？监听没配对
不是浏览器缓存，是 Webpack 5+ 默认只监听 entry 和 loader 相关文件，template 文件变更不在监听范围内。
- 最稳做法：在插件配置里加
template: path.resolve(__dirname, 'src/index.ejs')，并确保是绝对路径 - 配合
webpack-dev-server时，手动加watchFiles: ['src/index.ejs'] - VS Code 用户注意：开启「Files: Auto Save」的 atomic write 模式可能导致文件系统事件丢失，临时关闭再试
实际项目里最容易被忽略的，是模板路径的绝对化和 chunks 的显式声明——这两点不卡死，其他配置再花哨也白搭。
