常用的 webpack -- HtmlWebpackPlugin(了解)

在vue或react脚手架工具中, 项目默认已经配置了 html-webpack-plugin，通常能满足大多数基本需求。但是，特殊情况下需重新配置 html-webpack-plugin 的参数

一. html-webpack-plugin介绍

HtmlWebpackPlugin 是webpack 的插件,主要作用有以下几个方面

1. 自动生成 HTML 文件：在 webpack 构建过程中自动创建 HTML 文件。
2. 插入资源链接：自动将编译后的 CSS 和 JavaScript 文件链接插入到 HTML 中。
3. 模板支持：可以使用自定义 HTML 模板，并在构建时替换模板中的变量。
4. 环境变量：支持在 HTML 中使用 webpack 环境变量，如 process.env.NODE_ENV。
5. 多入口支持：可以为每个入口点生成不同的 HTML 文件，适用于多页面应用。

二. 安装

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

三. 配置

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中，如下所示：

通过这些选项，你可以控制生成的 HTML 文件的压缩程度，从而优化文件大小和加载性能。

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

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [
   new HtmlWebpackPlugin({
      template: path.join(__dirname, '/index.html'),// 指定模板文件
      title: 'My App', // 设置 HTML 的 title
      filename: 'index.html', // //打包后输出的文件名
      inject: 'body', // 指定资源注入的位置
      minify: {
        // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true, // 压缩内联css
        removeAttributeQuotes: true,//移除 HTML 属性值的引号
      }
      // 其他配置...
    })
 ],
};

这将生成一个经过压缩的 HTML 文件，移除了所有不必要的内容，使得文件更小，加载更快。 

其他配置可查阅官方文档 HtmlWebpackPlugin | webpack 中文文档