HtmlWebpackPlugin 是一个 webpack 插件，用于简化 HTML 文件的创建。它会自动将生成的 bundle 文件插入到 HTML 文件中，并且可以根据模板文件生成最终的 HTML 文件。在开发过程中，我们经常需要手动创建 HTML 文件并引入生成的 bundle 文件，使用 HtmlWebpackPlugin 可以帮助我们简化这个过程。
安装 HtmlWebpackPlugin
要使用 HtmlWebpackPlugin，首先需要安装它。可以通过 npm 或者 yarn 来安装 HtmlWebpackPlugin。
npm install html-webpack-plugin --save-dev
或者
yarn add html-webpack-plugin --dev
配置 HtmlWebpackPlugin
在 webpack 配置文件中，我们需要引入 HtmlWebpackPlugin，并在 plugins 数组中添加一个 HtmlWebpackPlugin 的实例。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ----
-------- -
--- -------------------
--------- ------------- -- ----
--------- ------------- -- --- ---- ---
---
--
--在上面的配置中，我们指定了模板文件为 index.html，并且输出的 HTML 文件名也为 index.html。HtmlWebpackPlugin 会根据模板文件生成最终的 HTML 文件，并将 bundle 文件插入到 HTML 文件中。
HtmlWebpackPlugin 配置项
HtmlWebpackPlugin 支持多种配置项，以下是一些常用的配置项：
template: 指定模板文件路径filename: 指定输出的 HTML 文件名title: 设置生成的 HTML 文件的标题chunks: 指定哪些 chunk 要被插入到 HTML 文件中minify: 压缩 HTML 文件
更多配置项可以参考 HtmlWebpackPlugin 的官方文档。
通过 HtmlWebpackPlugin，我们可以更方便地生成包含 bundle 文件的 HTML 文件，提高开发效率。