webpack不直接打包html，需html-webpack-plugin自动生成并注入带hash的资源引用；手动复制index.html会导致路径错误、hash不匹配、多页资源混乱等问题。
Webpack 本身不直接处理 HTML 文件的“打包”，它只把 index.html 当作静态资源复制过去；真正需要的是 html-webpack-plugin 来生成带正确资源引用的 HTML。
为什么直接放 index.html 到 dist 会出问题
Webpack 默认只打包 JS、CSS 等模块，index.html 若手动丢进 dist，里面的 <script src="bundle.js"></script> 很可能：路径不对、文件名带 hash 后无法匹配、开发环境和生产环境入口不一致。
- JS/CSS 输出带 hash（如
main.a1b2c3.js），但 HTML 里写死的是main.js - 开发时用
webpack-dev-server，HTML 需从内存读取，不是磁盘文件 - 多页面应用（MPA）下，每个 HTML 需独立控制 title、meta、引入的 chunk
必须装 html-webpack-plugin 并在配置中启用
它会在每次构建时自动生成 HTML，并自动注入正确的 <script></script> 和 <link> 标签——包括 hash、publicPath、chunk 分离后的多入口等细节。
- 安装：
npm install --save-dev html-webpack-plugin - 配置示例（
webpack.config.js）：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 源模板（可含 EJS 变量）
filename: 'index.html', // 输出名（默认也是 index.html）
inject: true, // 自动插入 script/link（推荐 true）
minify: { collapseWhitespace: true } // 生产环境建议压缩
})
]
};
-
template必须是相对webpack.config.js的路径，不是相对src -
inject: 'body'或'head'可控插入位置；设为false则需手动写 - 若用
mini-css-extract-plugin提取 CSS，它仍能自动加<link rel="stylesheet">
多个 HTML 页面怎么配
一个 HtmlWebpackPlugin 实例对应一个 HTML 输出。多页即多个实例，但注意：每个实例的 chunks 要显式指定，否则默认注入全部 entry。
- 比如有两个入口：
home和about，想让home.html只加载home相关资源：
new HtmlWebpackPlugin({
template: './src/home.html',
filename: 'home.html',
chunks: ['home'] // 关键！否则 home.html 也会引入 about.js
})
-
chunks: ['common', 'home']可用于共享 chunk 场景 - 避免漏写
chunks导致 HTML 加载了不该加载的 JS，引发变量冲突或白屏 - 配合
html-webpack-plugin的favicon选项可统一加图标，不用改模板
public 目录里的 HTML 不会被处理
Webpack 的 copy-webpack-plugin 或默认的 public 目录（v5+ 支持）只是原样拷贝，不会解析、不会注入资源、不会替换变量。
- 如果你把
index.html放进public/，它就真的只是“静态文件”——哪怕你配了html-webpack-plugin，两者互不影响 - 常见误操作：删了
plugins里的HtmlWebpackPlugin，以为public/index.html就够了 → 结果上线后 script 404 - 想保留部分静态 HTML（如
404.html），用copy-webpack-plugin显式声明，别混用
最常被忽略的是 chunks 配置和 template 路径写法；稍一疏忽，本地跑得通，部署后资源 404 或执行错乱，排查起来反而比写配置花更长时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
