html-webpack-plugin生成HTML空白的主因是未显式指定template选项或模板中缺少注入点（如<%= htmlWebpackPlugin.tags.headTags %>），导致默认空模板被使用且资源无法注入。
html-webpack-plugin 生成的 HTML 文件为什么空白？
常见现象是打包后 index.html 有结构但没内容，或 js/css 根本没注入。根本原因通常是插件没读到模板，或模板里没留注入点。
实操建议：
- 必须显式传
template选项，否则插件用默认空模板 —— 即使你项目根目录有index.html，它也不会自动识别 - 模板文件里至少得有一处
<%= htmlWebpackPlugin.files.chunks.main.entry %>或更常见的<%= htmlWebpackPlugin.tags.headTags %>，但更推荐直接用<%= htmlWebpackPlugin.options.title %>这类变量确认模板被解析 - 如果用 EJS 模板（默认），别写成
<!-- inject -->这种 webpack-dev-server 风格注释，它不认
怎么让 html-webpack-plugin 注入多个 JS 文件？
默认只注入 main 入口，但实际项目常有 vendor、polyfill 等分离 chunk。关键在 Webpack 的 optimization.splitChunks 和插件的 chunks 配置联动。
实操建议：
- 确保 Webpack 已配置
splitChunks并生成了额外 chunk（如vendor），可通过webpack --stats=normal查看输出 chunk 列表 - 在
HtmlWebpackPlugin实例中设chunks: ['main', 'vendor']，顺序决定 script 标签顺序 - 若用
chunks: 'all'，注意它会包含异步 chunk（如 dynamic import 产生的），可能造成误加载；生产环境慎用 - 如果某个 chunk 不想注入（比如只供 Worker 使用），在
splitChunks.cacheGroups里设enforce: true并配合chunks: 'initial'
devServer 本地启动时 HTML 不更新？
改了模板文件（如 src/index.ejs）但刷新浏览器还是旧内容，不是缓存问题，而是插件监听机制没覆盖到模板变更。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- Webpack 5+ 默认不会监听
template路径外的文件，必须加templateParameters或显式告诉插件监听范围 - 最稳做法：在插件配置里加
template: path.resolve(__dirname, 'src/index.ejs')，并确保路径是绝对路径 —— 相对路径在某些 CLI 封装下会失效 - 如果用 webpack-dev-server，检查是否开了
watchFiles选项，可手动加：watchFiles: ['src/index.ejs'] - VS Code 用户注意：某些文件保存模式（如 atomic write）会导致文件系统事件丢失，临时关掉「Files: Auto Save」再试
生成多个 HTML 文件时 public 目录资源引用错乱？
比如 public/favicon.ico 在 admin.html 里变成 /admin/favicon.ico，404。这是因为 html-webpack-plugin 默认按输出 HTML 路径推导 public 资源前缀，但没考虑多页场景。
实操建议：
- 所有静态资源引用统一走
process.env.NODE_ENV === 'production' ? '/favicon.ico' : '/favicon.ico'这种绝对路径，别依赖相对路径 - 在插件配置里设
publicPath: '/'（注意结尾斜杠），覆盖 Webpack 的output.publicPath对 HTML 内联资源的影响 - 如果必须用相对路径，每个
HtmlWebpackPlugin实例单独配templateParameters，把BASE_URL注入模板，然后在 EJS 里写<link rel="icon" href="favicon.ico">
多页 + public 资源 + 自定义 template 的组合，最容易漏掉的是 publicPath 和 template 路径的绝对化处理，这两处一错，整个资源链就断了。
