html-webpack-plugin 配置

HTML Webpack Plugin 是一个非常有用的插件，它可以帮助你自动化地生成 HTML 文件，并将打包后的静态文件部署到指定的文件夹中。下面是一个基本的 HTML Webpack Plugin 配置示例：

javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: 'src/index.html', // 指定要使用的 HTML 模板文件
      filename: 'index.html', // 指定输出的 HTML 文件名
      inject: 'body', // 将打包后的脚本注入到 HTML 文件的 body 中
      minify: {
        collapseWhitespace: true, // 压缩 HTML 文件中的空格
        removeComments: true, // 删除 HTML 文件中的注释
        removeRedundantAttributes: true, // 删除多余的 HTML 属性
        removeScriptTypeAttributes: true, // 删除 script 标签中的 type 属性
        removeStyleLinkTypeAttributes: true, // 删除 style 和 link 标签中的 type 属性
        useShortDoctype: true // 使用短 doctype
      }
    })
  ]
};

在上面的配置中，我们通过 new HtmlWebpackPlugin() 来创建一个新的 HTML Webpack Plugin 实例，并传递一个包含配置选项的对象作为参数。下面是一些常用的配置选项：

title：指定 HTML 文件的标题。
template：指定要使用的 HTML 模板文件，可以是相对路径或绝对路径。
filename：指定输出的 HTML 文件名。
inject：指定要将打包后的脚本注入到 HTML 文件的哪个位置，可以是 'head' 或 'body'。
minify：指定要对 HTML 文件进行压缩和优化的一系列选项，包括删除空格、注释、多余的属性、script 和 link 标签中的 type 属性等。

除了上述选项外，HTML Webpack Plugin 还提供了许多其他配置选项，你可以在官方文档中查看更多信息。