Webpack 通过 html-webpack-plugin 实现 HTML 模板自动注入打包脚本：安装后在配置中指定 template 路径，插件会将编译后的 JS 自动插入到 body 底部，无需手动引入，且路径由 output 配置自动推导。
Webpack 配置 HTML 模板自动注入打包脚本，核心是靠 html-webpack-plugin 实现：它会在打包时自动生成 HTML 文件，并把编译好的 JS（比如 bundle.js）自动插入到 <script></script> 标签中，无需手动写引入。
安装 html-webpack-plugin
在项目根目录执行：
npm install -D html-webpack-plugin
注意：必须是 -D（开发依赖），因为这个插件只在构建阶段使用，不参与运行时。
配置 webpack.config.js 插件项
在 webpack.config.js 中引入并实例化插件：
立即学习“前端免费学习笔记（深入）”；
- 顶部添加：
const HtmlWebpackPlugin = require('html-webpack-plugin'); - 在
module.exports对象里加入plugins数组：
new HtmlWebpackPlugin({
template: './src/index.html' // 指向你写的原始 HTML 模板
})
]
⚠️ 关键点：
– template 路径必须存在且是真实 HTML 文件（如 src/index.html）；
– 如果没指定 template，插件会生成一个极简的默认 HTML，但通常你希望控制结构和 meta 标签，所以建议自己写一份基础模板。
准备 HTML 模板文件
在 src/ 目录下新建 index.html，内容示例：
Webpack 打包后，插件会自动在这个文件的 底部插入类似 <script src="bundle.js"></script> 的标签。
确保输出路径与 script 引入逻辑匹配
检查 output.filename 和 output.path 设置是否合理：
-
output.path是最终 HTML 和 JS 存放的物理目录（如path.resolve(__dirname, 'dist')） -
output.filename是生成的 JS 文件名（如'bundle.js'或带 hash 的'[name].[contenthash:8].js'） - 插件会根据这两个值，生成正确的相对路径引用，不需要手动改
src属性
如果 JS 放在子目录（比如 output.path 是 dist/js），记得在 HtmlWebpackPlugin 选项中加 filename: '../index.html' 或调整 publicPath，否则 script 路径可能出错。
