Question

html-webpack-plugin 是一个用于简化和自动化生成 HTML 文件的 Webpack 插件。它能将 Webpack 打包生成的资源（如 JavaScript 和 CSS 文件）自动注入到 HTML 文件中。这对于在开发和生产环境中生成 HTML 文件非常有用，尤其是当你的资源文件名因缓存和版本控制而变化时。

主要功能：

1. 自动注入资源 : 自动将 Webpack 生成的 JavaScript 和 CSS 文件链接添加到 HTML 文件中。
2. 模板支持 : 支持使用自定义 HTML 模板（如 EJS、Pug、Handlebars 等）。
3. 多页面应用 : 支持生成多个 HTML 文件，用于多页面应用。
4. 清理功能 : 可以配置清理旧的 HTML 文件，确保只保留最新的版本。

安装：

npm install html-webpack-plugin --save-dev

基本用法：

1. 配置 Webpack :

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const path = require('path');
   
   module.exports = {
     entry: './src/index.js', // 入口文件
     output: {
       filename: 'bundle.js', // 输出的文件名
       path: path.resolve(__dirname, 'dist') // 输出目录
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.html', // 自定义 HTML 模板
         filename: 'index.html' // 输出 HTML 文件名
       })
     ]
   };
   

2. 自定义模板 :
   html-webpack-plugin 支持自定义 HTML 模板，允许使用模板引擎生成 HTML 文件。例如，如果你使用 EJS 模板：

   new HtmlWebpackPlugin({
     template: './src/index.ejs', // 使用 EJS 模板
     filename: 'index.html'
   })
   

多页面应用：

如果你有多个 HTML 页面，可以为每个页面实例化 HtmlWebpackPlugin ：

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

module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['main'] // 仅包含 main.bundle.js
    }),
    new HtmlWebpackPlugin({
      template: './src/admin.html',
      filename: 'admin.html',
      chunks: ['admin'] // 仅包含 admin.bundle.js
    })
  ]
};

进阶配置：

html-webpack-plugin 提供了多种配置选项，比如：

• inject : 控制 JavaScript 和 CSS 文件的注入方式（ true / false / body / head ）。
• minify : 配置 HTML 压缩选项。
• favicon : 指定一个 favicon 图标文件。

示例：

new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: 'body', // 将脚本注入到 body 标签底部
  minify: {
    collapseWhitespace: true, // 压缩 HTML
    removeComments: true, // 移除注释
    removeRedundantAttributes: true // 移除冗余属性
  },
  favicon: './src/favicon.ico' // 指定 favicon 图标
})

通过使用 html-webpack-plugin ，你可以简化构建流程，自动生成和更新 HTML 文件，提高开发效率。

配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
 plugins: [
  new HtmlWebpackPlugin({ // 打包输出 HTML
   title: 'Hello World',//文件的标题
   minify: { //minify 的作用是对 html 文件进行压缩
    removeComments: true, // 移除 HTML 中的注释
    collapseWhitespace: true, // 删除空白符与换行符
    minifyCSS: true, // //是否压缩 html 里的 css 默认值 false；
    caseSensitive: true, //是否对大小写敏感，默认 false
    ollapseWhitespace: true, //是否去除空格，默认 false
    minifyJS: true, //是否压缩 html 里的 js
    removeAttributeQuotes: true, //是否移除属性的引号 默认 false
    removeComments: true, //是否移除注释 默认 false
    emoveCommentsFromCDATA: true, //从脚本和样式删除的注释 默认 false
    emoveEmptyAttributes: true, //是否删除空属性，默认 false
    removeRedundantAttributes: true, //删除多余的属性
    removeScriptTypeAttributes: true, //删除 script 的类型属性，在 h5 下面 script 的 type 默认值：text/javascript 默认值 false
   },
   filename: 'index.html', //输出的 html 的文件名称
   template: 'index.html', //html 模板在的文件路径
   hash: true,//hash 作用是给生成的 js 文件一个独特的 hash 值，默认值为 false 被构建过后的 html 引用 js 效果如下
   // <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
  }),
 ]