不能手动复制index.html到dist，因Webpack不解析HTML中的资源路径，开启hash后写死的文件名会404；dev-server从内存读HTML而非磁盘；多入口时未控制chunks会导致所有JS注入同一页面。
Webpack 本身不打包 HTML，直接把 index.html 手动丢进 dist 目录一定会出问题：资源路径错、hash 文件名对不上、多页 chunk 注入混乱——必须用 html-webpack-plugin 自动生成并注入。
为什么不能手动复制 index.html 到 dist
Webpack 默认只处理模块化依赖（JS/CSS/图片等），index.html 被当作静态资源原样复制，不会解析里面的 <script src="bundle.js">。一旦开启 hash（如 main.a1b2c3.js），HTML 里写死的 main.js 就 404；开发时 webpack-dev-server 从内存读 HTML，磁盘文件根本没被加载；多入口场景下，不控制 chunks 会导致所有 JS 全塞进一个页面。
-
output.filename带 hash 时，HTML 中引用名必须动态匹配 - 开发服务器不读磁盘
dist/index.html，而是靠插件在内存中生成 -
inject: true是默认行为，但若设为false，就得手动写<%= htmlWebpackPlugin.files.js %>模板语法
html-webpack-plugin 最小可用配置
只需三步：安装、引入、实例化。模板路径必须相对于 webpack.config.js，不是 src 目录；filename 决定输出名，template 决定源文件。
- 安装：
npm install --save-dev html-webpack-plugin - 配置中
template: './src/index.html'—— 注意是单引号+相对路径 -
inject: 'body'表示 script 插入</body>前；设'head'会放<head>里 - 若用
mini-css-extract-plugin提取 CSS，它仍能自动加<link rel="stylesheet">
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/[name].[contenthash:8].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
})
]
};
多页应用（MPA）怎么配多个 HTML
一个 HtmlWebpackPlugin 实例对应一个 HTML 输出。多个页面 ≠ 多个 entry 就够了，必须显式声明每个插件实例的 chunks，否则默认注入全部 entry 的产物，造成资源冗余甚至执行错误。
立即学习“前端免费学习笔记（深入）”；
- 两个页面需两个插件实例，比如
home和user入口 -
chunks: ['home']表示只注入home.js及其依赖的 CSS/JS -
filename必须不同，否则后一个会覆盖前一个 - 模板里可通过
<%= htmlWebpackPlugin.options.title %>动态写<title>
容易被忽略的细节
很多人卡在路径和上下文上：模板里写的 ./logo.png 是相对于模板文件位置解析的，不是 webpack.config.js；publicPath 影响所有注入资源的 base URL，如果部署到子路径（如 /app/），必须配 output.publicPath: '/app/'，否则生成的 script 标签路径全错。还有，EJS 模板中用 <%= htmlWebpackPlugin.files.chunks.home.entry %> 可精确获取某个 chunk 的完整路径，比硬编码可靠得多。
