html-webpack-plugin是解决HTML与Webpack打包资源集成的核心插件，因其能自动注入带hash的JS/CSS、适配多页、支持模板与压缩，而手动复制index.html至dist会导致路径错误、hash不匹配、script缺失及Uncaught SyntaxError等问题。
Webpack 本身不打包 HTML，它只把 index.html 当作静态文件复制过去；真正要让 HTML 正确引用带 hash 的 JS/CSS、适配多页、支持压缩和动态注入，必须用 html-webpack-plugin —— 手动丢 HTML 到 dist 目录，99% 会出路径错、hash 不匹配、script 标签漏加等问题。
为什么不能直接把 index.html 放进 dist
常见错误现象：Uncaught SyntaxError: Unexpected token '（浏览器加载了 HTML 当 JS 解析），或控制台报 <code>GET /bundle.js 404。这是因为：
- Webpack 输出的 JS 文件名带 hash（如
main.a1b2c3.js），但 HTML 里写死的是main.js -
webpack-dev-server运行时 HTML 从内存读取，不是磁盘上的文件，手动复制无效 - 用了
mini-css-extract-plugin提取 CSS 后，HTML 里没自动加<link rel="stylesheet">标签 - 多页应用下，每个页面该引入哪些 chunk，手动维护极易出错
html-webpack-plugin 基础配置要点
安装后，在 webpack.config.js 中配置插件实例。关键参数不是“有没有”，而是“怎么设”：
-
template必须是相对webpack.config.js的路径，比如'./src/index.html'，不是'src/index.html'或绝对路径 -
inject: true是默认行为，但显式写出更安全；设为'body'或'head'可控 script 插入位置 -
filename控制输出名，多页时别全写成'index.html'，否则后一个会覆盖前一个 -
minify在生产环境建议开启，例如{ collapseWhitespace: true, removeComments: true }，但开发时可关掉，方便调试
多页面应用（MPA）中怎么配多个 HTML
一个 HtmlWebpackPlugin 实例对应一个 HTML 输出。多个页面 ≠ 多个 entry 就够了，必须配多个插件实例，并显式指定 chunks：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 不设
chunks：默认注入全部 entry 的资源，导致 login 页面加载了 dashboard 的 JS - 正确写法示例：
chunks: ['login']（前提是 entry 里定义了login: './src/login/index.js'） - 每个实例的
template可不同，比如'./src/login/index.html'和'./src/dashboard/index.html' - 若需动态传参（如 title），可在 template 里用 EJS 语法：
<title><%= htmlWebpackPlugin.options.title %></title>，然后在插件配置中加title: '登录页'
html-loader 和 html-webpack-plugin 的分工
两者常被混淆，但职责完全不同：
-
html-loader：把 HTML 文件当模块处理，解析其中的<img src="./logo.png">等资源引用，让 Webpack 能打包图片、CSS 等——它不生成 HTML 文件，也不注入 script -
html-webpack-plugin：不解析 HTML 内容，只读取 template，生成新 HTML 并注入资源链接——它依赖html-loader（如果 template 里有相对路径资源）才能正确处理图片等 - 典型组合：先用
html-loader处理 template 源文件里的资源路径，再由html-webpack-plugin把处理后的结果生成最终 HTML
最容易被忽略的一点：template 文件里写的资源路径（如 ./style.css）是否能被 html-loader 正确解析，取决于你有没有在 rule 里配好 html-loader，而不是只装了 html-webpack-plugin。缺这步，图片 404、CSS 不加载，问题就藏得特别深。
