html-webpack-plugin 是目前最稳定、最主流的 html 自动注入方案，只要配置得当，它能可靠地把打包后的 .js 和 .css 插入到生成的 html 中，无需手动维护路径或哈希值；inject: true 默认将 script 插入 body 底部，但实际行为受 scriptloading 和 chunks 控制，多入口场景下易漏资源或错位，且等价于 inject: 'body'，仅对当前实例声明的 chunks 生效；css 注入 head 依赖 mini-css-extract-plugin 成功提取；开发环境需清空模板中手动 script 标签以防重复加载；精准控制须用 inject: false + ejs 模板中 htmlwebpackplugin.tags.headtags/bodytags 手动渲染；多页面项目中每个 htmlwebpackplugin 实例必须独立配置 chunks，名称须与 entry 严格一致，且 template 路径以 webpack.config.js 所在目录为根。
直接说结论：html-webpack-plugin 是目前最稳定、最主流的 HTML 自动注入方案，只要配置得当，它能可靠地把打包后的 .js 和 .css 插入到生成的 HTML 中，无需手动维护路径或哈希值。
为什么 inject: true 不总按预期工作？
默认 inject: true 会把脚本插入 底部，但实际行为受 scriptLoading 和 chunks 控制——尤其在多入口或多 chunk 场景下容易漏资源或错位置。
-
inject: true实际等价于inject: 'body'，但只对当前插件实例声明的chunks生效；没显式指定chunks时，它会尝试注入所有 entry 的资源，可能混入你不想要的 bundle - 如果用了
mini-css-extract-plugin，CSS 仍会被注入，但前提是 CSS chunk 确实被该插件提取出来了；否则可能根本没<link>标签 - 开发环境常因模板里残留了手动写的
<script src="..."></script>，导致重复加载——建议构建前清空模板中的静态资源引用
如何精准控制 script 和 link 的插入位置？
靠 inject: 'head' 或 inject: 'body' 只能粗粒度控制区域，真正需要精细调度（比如关键 CSS 内联、非阻塞脚本延迟加载）必须用 inject: false + 手动模板标签。
- 启用
inject: false后，在 EJS 模板中用和分别获取 head/body 区域的标签数组 - 数组元素是对象，含
tagName、attributes、innerHTML等字段，可做条件过滤：例如只注入rel="preload"的 link，或排除某个第三方 SDK 的 script - 注意：手动模式下，
htmlWebpackPlugin.files.js和htmlWebpackPlugin.files.css已废弃，必须用tags对象，否则模板编译报错
多页面项目里，为什么有的 HTML 没注入资源？
每个 HtmlWebpackPlugin 实例只负责一个 HTML 输出，且默认不区分 chunks——常见错误是多个实例共用同一份配置，导致后实例覆盖前实例的注入逻辑。
- 每个实例必须独立声明
chunks，例如new HtmlWebpackPlugin({ template: 'src/pageA.html', filename: 'pageA.html', chunks: ['pageA'] }) - entry 名称要和
chunks数组里的字符串严格一致；大小写、拼写差一点，对应资源就完全不会注入 - 如果某页面不需要 JS，只渲染静态内容，可以设
chunks: []，否则插件仍会尝试注入默认 chunk，造成 404
最容易被忽略的是模板路径的基准点——template 始终以 webpack.config.js 所在目录为根，不是 src/ 或 public/；写错路径时插件静默回退到默认空模板，资源看似“注入”了，其实只是生成了一个没内容的 HTML 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
