html-webpack-plugin 插件用于自动注入 Webpack 打包生成的 JS/CSS 到 HTML 模板中。需安装为 dev 依赖，配置 template 路径并加入 plugins 数组；支持多页面、自定义注入位置（如 head）及按 chunks 精确控制资源引入。
Webpack 本身不处理 HTML 文件，自动注入脚本和样式靠的是 html-webpack-plugin 插件。它会在打包时读取你写的 HTML 模板，生成最终的 HTML，并把编译好的 JS、CSS 等资源自动插入到正确位置（比如 <body> 底部），路径也由 Webpack 自动计算，不用手动写 <script src="...">。
安装插件
在项目根目录运行：
npm install -D html-webpack-plugin
注意必须加 -D（即 --save-dev），因为这是构建阶段用的工具，不会出现在生产环境运行时。
准备 HTML 模板
在 src/ 下新建 index.html，内容可以很简洁：
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html> <html> <head> <title>My App</title> </head> <body> <div id="root"></div> </body> </html>
这个文件只是模板，不需要写任何 <script> 标签——插件会自动补上。
配置 webpack.config.js
在配置文件顶部引入插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
然后在 module.exports 的 plugins 数组中添加实例：
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
关键点：
-
template路径必须真实存在，且是合法 HTML 文件； - 如果不设
template，插件会生成一个极简默认页，但通常你需要控制<meta>、标题、根容器等结构； - 插件默认把 JS 插入
<body>底部，如需改到<head>，加选项inject: 'head'。
多页面或按需注入 JS
如果项目有多个 HTML 页面，或者想让某个页面只加载特定 JS 包（比如登录页不加载编辑器代码），可以用多入口 + chunks 控制：
- 在
entry中定义多个入口，如{ main: './src/main.js', login: './src/login.js' }； - 为每个页面单独配一个
HtmlWebpackPlugin实例，用filename指定输出名，template指定原始模板，chunks列出要注入的 JS 名称（对应 entry 的 key）； - 确保
output.filename使用[name].js，否则插件无法匹配。
不复杂但容易忽略：只要模板存在、插件装对、配置写进 plugins，打包后 dist 目录下就会出现带正确 script 引用的 HTML 文件。
