文章目录
- HtmlWebpackPlugin介绍
- HtmlWebpackPlugin用法
-
- [1. 安装HtmlWebpackPlugin插件:](#1. 安装HtmlWebpackPlugin插件:)
- [2. 引入HtmlWebpackPlugin插件:](#2. 引入HtmlWebpackPlugin插件:)
- [3. 配置HtmlWebpackPlugin:](#3. 配置HtmlWebpackPlugin:)
- [4. 更多HtmlWebpackPlugin配置选项:](#4. 更多HtmlWebpackPlugin配置选项:)
- 总结
HtmlWebpackPlugin介绍
Webpack是一个功能强大的模块打包工具,而HtmlWebpackPlugin是Webpack的一个插件,用于生成HTML文件并自动注入打包后的资源。
HtmlWebpackPlugin用法
1. 安装HtmlWebpackPlugin插件:
在开始之前,首先需要确保已经安装了Webpack5。然后,通过以下命令安装HtmlWebpackPlugin插件:
bash
npm install html-webpack-plugin --save-dev
2. 引入HtmlWebpackPlugin插件:
在Webpack的配置文件中,使用require语句引入HtmlWebpackPlugin插件:
javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
3. 配置HtmlWebpackPlugin:
在Webpack配置文件中,通过创建一个新的HtmlWebpackPlugin实例来配置插件:
javascript
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
}
})
]
- 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时启用缓存。
javascript
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
})
总结
介绍了Webpack5中HtmlWebpackPlugin插件的用法及其各种配置选项。借助HtmlWebpackPlugin插件,我们可以方便地生成HTML文件并自动注入打包后的资源,同时还能对HTML进行压缩和定制化配置。