html-webpack-plugin 自动生成 HTML 并自动引入打包 JS 的核心三步：安装插件、配置入口与输出、在 webpack 配置中注册插件实例；它自动计算依赖并注入带正确路径的 script 标签，支持自定义模板、inject 控制插入位置、chunks 精确筛选资源。
用 html-webpack-plugin 自动生成 HTML 并自动引入打包后的 JS，核心就三步：安装插件、配置入口与输出、在 webpack 配置中注册插件实例。它会根据你的 JS 入口自动计算依赖，生成带正确路径的 script 标签，无需手动维护引用。
1. 安装插件
在项目根目录运行：
npm install --save-dev html-webpack-plugin
安装后，package.json 的 devDependencies 中会出现 "html-webpack-plugin": "^5.x"（版本以实际为准）。
2. 基础配置（自动生成默认 index.html）
在 webpack.config.js 中引入并使用：
立即学习“前端免费学习笔记（深入）”；
- 引入插件：
const HtmlWebpackPlugin = require('html-webpack-plugin'); - 在
module.exports的plugins数组中添加实例：new HtmlWebpackPlugin()
此时打包（npx webpack）后，dist/index.html 会自动生成，内容包含默认 title 和一个指向 main.js（或你配置的 output.filename）的 <script></script> 标签，放在
