html-webpack-plugin能系统性解决html生成、资源注入与版本控制，关键在于精准配置template路径、chunks分页及minify安全选项：必须用path.resolve显式解析模板路径，多页需按entry键名严格匹配chunks，minify应禁用removeemptyattributes等高风险项。
直接用 html-webpack-plugin 就能系统性解决 HTML 生成、资源注入和静态资源版本控制问题，关键不是“加插件”，而是配对路径、chunks 和 minify 细节。
template 路径必须显式解析
写 template: 'src/index.html' 看似简单，但一旦文件实际在 public/index.html，插件就找不到它，自动 fallback 到空模板——你改了模板，构建结果却完全不变，还以为是缓存问题。
- 始终用
path.resolve(__dirname, 'public/index.html')拼路径，确保指向真实文件 - 启动 Webpack 时加上
--stats=normal，看控制台是否打印HtmlWebpackPlugin: using template xxx，这是最准的验证方式 - 如果用 TypeScript 写配置，确认
tsconfig.json的outDir不会干扰__dirname的运行时值
minify 要关掉危险压缩项
默认 minify 会删引号、去换行、合并属性，看似更小，实则可能让 Vue 或 Alpine.js 读不到 data-user-id="123"，或让内联 <script></script> 因空格丢失而报语法错误。
- 显式配置
minify，保留安全项：collapseWhitespace: true、removeComments: true - 禁用高风险项：
removeEmptyAttributes: false、removeScriptTypeAttributes: false - 内联 JS 段落可用
<!-- htmlmin:ignore -->...<!-- htmlmin:endignore -->包裹
多页应用必须按入口配 chunks
有 entry: { home: './src/home.js', admin: './src/admin.js' } 却只放一个插件实例，结果 admin.html 里混进了 home.js，体积变大、变量冲突、加载顺序错乱。
- 每个页面单独 new 一次插件：
new HtmlWebpackPlugin({ filename: 'admin.html', template: ..., chunks: ['admin'] }) -
chunks值必须和entry键名严格一致，大小写、拼写都不能错 - 不指定
chunks就等于把所有 entry 打包产物都塞进去，相当于没分页
hash 和 inject 要配合使用
hash: true 是给 script 和 link 标签加编译哈希，但前提是这些标签得真被插件注入进去；如果 inject: false 或模板里没留位置，hash 就毫无意义。
-
inject推荐设为'body'（等价于true），确保 JS 在 body 底部执行 -
hash: true配合filename: 'index.[contenthash:8].html'可实现 HTML 文件级缓存控制 - favicon 要通过
favicon: path.resolve(__dirname, 'public/favicon.ico')显式传入，并在模板中用渲染
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
