Webpack5 htmlwebpackplugin用法

---

HtmlWebpackPlugin介绍

Webpack是一个功能强大的模块打包工具，而HtmlWebpackPlugin是Webpack的一个插件，用于生成HTML文件并自动注入打包后的资源。

HtmlWebpackPlugin用法

1. 安装HtmlWebpackPlugin插件：

在开始之前，首先需要确保已经安装了Webpack5。然后，通过以下命令安装HtmlWebpackPlugin插件：

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

2. 引入HtmlWebpackPlugin插件：

在Webpack的配置文件中，使用require语句引入HtmlWebpackPlugin插件：

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

3. 配置HtmlWebpackPlugin：

在Webpack配置文件中，通过创建一个新的HtmlWebpackPlugin实例来配置插件：

   plugins: [
     new HtmlWebpackPlugin({
       //一般使用绝对路径
       template:   path.resolve(__dirname, '../public/index.html') ,
       filename: 'index.html',
       minify: {
         collapseWhitespace: true,
         removeComments: true,
         removeRedundantAttributes: true,
         removeScriptTypeAttributes: true,
         removeStyleLinkTypeAttributes: true,
         useShortDoctype: true
       }
     })
   ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• template：指定HTML模板文件的路径，可以使用相对路径或绝对路径。
• filename：指定生成的HTML文件名。
• minify：压缩生成的HTML文件，可以通过配置该选项实现对HTML的压缩。

4. 更多HtmlWebpackPlugin配置选项：

• title：设置生成的HTML文件的标题。
• favicon：指定生成的HTML文件的favicon图标。
• meta：定义生成的HTML文件中的meta标签。
• hash：为生成的资源文件添加唯一的哈希值。
• chunks：配置需要注入到HTML文件中的chunk。
• templateParameters：自定义模板参数，可以在HTML模板文件中使用。
• inject：指定资源文件的注入位置，可选值有true、‘head’和’body’。
• scriptLoading：指定生成的script标签的加载方式，可选值有’defer’、‘async’和’blocking’。
• cache：启用或禁用缓存，当值为true时启用缓存。

new HtmlWebpackPlugin({
  ...
  title: 'My App',
  favicon: './src/assets/favicon.ico',
  meta: {
    viewport: 'width=device-width, initial-scale=1'
  },
  hash: true,
  chunks: ['main'],
  templateParameters: {
    BASE_URL: '/'
  },
  inject: 'body',
  scriptLoading: 'defer',
  cache: true
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

总结

介绍了Webpack5中HtmlWebpackPlugin插件的用法及其各种配置选项。借助HtmlWebpackPlugin插件，我们可以方便地生成HTML文件并自动注入打包后的资源，同时还能对HTML进行压缩和定制化配置。