webpack HtmlWebpackPlugin

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 文件，提高开发效率。