请说明 html-webpack-plugin 这个插件在 Webpack 构建流程中的具体用途和主要功能。

回答思路

1. 【回答框架 1】html-webpack-plugin 是 Webpack 生态中用于简化 HTML 文件处理的插件，核心作用是自动生成一个 HTML 入口文件，并将打包后的 JS 和 CSS 资源以 <script> 和 <link> 标签形式自动注入到该 HTML 中，省去手动维护引用路径的麻烦。
2. 【回答框架 2】该插件支持多页应用场景，可同时生成多个 HTML 文件，每个页面指定不同的模板和资源注入顺序；还支持自定义模板引擎如 ejs、pug 等，通过 template 属性指定模板路径，插件会渲染模板并注入资源。
3. 【回答框架 3】除此之外，插件提供多种配置选项，比如 title 设置页面标题，filename 指定输出 HTML 文件名，chunks 控制注入哪些代码块，publicPath 覆盖资源的公共路径，minify 可压缩 HTML，hash 可给注入文件链接添加指纹，cache 处理缓存策略等，满足不同构建需求。
4. 【回答框架 4】在开发环境，插件通常配合 devServer 的 historyApiFallback 使用，确保前端路由在刷新时能正确回退到 index.html；在生产环境，它帮助将带哈希的文件名自动更新到 HTML 中，实现静态资源的缓存控制。
5. 【回答框架 5】总体而言，该插件将 HTML 作为构建产物的一部分，实现了资源引用的自动管理和注入，是 Webpack 工程化配置中非常基础且常用的插件之一。
6. 【关键点 1】自动生成 HTML 入口文件并注入构建后的 JS/CSS 资源。
7. 【关键点 2】支持多页应用，可配置多个 HTML 及自定义模板。
8. 【关键点 3】提供丰富的配置项，如 title、filename、minify、hash 等。
9. 【关键点 4】与 loader 配合可处理模板文件，如 ejs、pug。
10. 【关键点 5】在开发与生产环境均能保证资源引用路径正确更新。
11. 【易错点 1】不要混淆 html-webpack-plugin 与 webpack-dev-server 的自动刷新功能，前者负责 HTML 生成与资源注入，后者负责开发服务器热更新。
12. 【易错点 2】当项目使用 publicPath 或构建产物存放于子路径时，需正确配置 output.publicPath 或插件 publicPath，否则资源路径会出错。
13. 【易错点 3】多页面配置时，需为每个页面指定不同的 chunk，否则注入的脚本可能重复或包含无关页面代码。