Webpack最常用的插件：HTML Webpack Plugin
今天介紹 webpack 的一個(gè)最常用的插件：HTML Webpack Plugin。
說它是使用 webpack 開發(fā)前端項(xiàng)目必不可少的插件也不為過，因?yàn)樗梢宰詣?dòng)幫我們將 webpack 打包生成的文件(比如 js 文件、css 文件)嵌入到 html 文件中。
這在生成的文件帶有哈希串時(shí)尤為有用。
在 webpack 配置文件引入 HtmlWebpackPlugin 插件，然后在 plugins 數(shù)組中通過 new HtmlWebpackPlugin() 加入 HtmlWebpackPlugin 實(shí)例對象即可。
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.[contenthash:8].js',
},
mode: 'production',
plugins: [
new HtmlWebpackPlugin()
],
}
我們執(zhí)行 npx webpack 命令后，webpack 額外給我們生成了一個(gè) dist/index.html 文件。該 html 文件格式化后得到的內(nèi)容為：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script defer="defer" src="app.c8b961ec13a790ae7d15.js"></script>
</head>
<body></body>
</html>
可以看到將打包好的 app.js 文件被自動(dòng)嵌入到 head 元素下最后一個(gè)子元素位置。
這里打包文件名尾部被添加了內(nèi)容哈希串，這意味著每次項(xiàng)目的內(nèi)容發(fā)生變化，哈希串的值都不同。
試想下，如果你自己管理 html 文件，每次都要改這個(gè) js 文件名，是要多累，還好有 HtmlWebpackPlugin 幫忙。
當(dāng)然前面這種只是 HtmlWebpackPlugin 插件的默認(rèn)用法，我們可以做更具體的定制化。
一些常用的屬性
我們需要傳入一個(gè)配置對象來進(jìn)行模板渲染定制化。
HtmlWebpackPlugin 的配置非常豐富，不過常用的就幾個(gè)。
plugins: [
new HtmlWebpackPlugin({
title: '前端西瓜哥的博客',
favicon: 'static/favicon.ico',
}),
],
- titile：設(shè)置網(wǎng)頁標(biāo)題。
- filename：生成 html 文件名，默認(rèn)值為 index/html。
- template：使用自己的模板，這里填這個(gè)模板的路徑，使用了之后一些配置項(xiàng)就無效了，比如 title。
- favicon：指定網(wǎng)站圖標(biāo)路徑，除了會(huì)在 html 上填充 favicon 相關(guān)內(nèi)容，還會(huì)將該文件拷貝到打包文件夾下，非常好用。
- minify：是否壓縮 html 文件。不設(shè)置時(shí)，如果 webpack 的 mode 為 production，就會(huì)壓縮 html，移除多余的空格和注釋之類的。
使用自定義 html 模板
在實(shí)際開發(fā)中，通常是創(chuàng)建一個(gè) index.html 提供給 HtmlWebpackPlugin 插件作為模板。
這樣的話，title 等配置和一些更細(xì)碎的內(nèi)容就可以直接寫到 html 上。相比配置，直接在 html 上編輯要更直觀些。
我們在根目錄創(chuàng)建一個(gè) index.html 作為模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端西瓜哥</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body></body>
</html>
這樣就可以直接在 html 模板上添加 title，以及一些 cdn 形式的第三方庫。
webpack.config.js 配置改為：
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
}),
],
生成的 html 為：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端西瓜哥</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script defer src="app.d02c9155f73c92f51bf5.js"></script>
</head>
<body></body>
</html>
第三方庫建議使用自己本地項(xiàng)目的，會(huì)更穩(wěn)定和安全些，比如上面就建議改為<script src="static/jquery-3.6.0.min.js"></script>。
這里會(huì)用到一個(gè) copy-webpack-plugin 插件將一些文件或文件夾拷貝到打包目錄下。關(guān)于這個(gè)插件我會(huì)另外專門寫一篇文章講解，這里不展開。
自定義 html 注入變量
webpack 支持通過使用 lodash.template() 的方式注入變量。
我們將模板 html 改為下面這樣：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<%= htmlWebpackPlugin.options.saySomething %>
</body>
</html>
配置改為：
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
title: '前端西瓜哥的博客',
// 下面這個(gè)是自定義屬性
saySomething: 'Stay hungry, stay foolish'
}),
],
將傳入給 HtmlWebpackPlugin 的配置屬性會(huì)成為 htmlWebpackPlugin.options 對象下的屬性，嵌入到模板 html 下。
所以這里的生成結(jié)果是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端西瓜哥的博客</title>
<script defer src="app.d02c9155f73c92f51bf5.js"></script></head>
<body>
Stay hungry, stay foolish
</body>
</html>
因?yàn)槭褂昧?lodash.template 模板渲染豐富，除了可以嵌入變量的值，還支持判斷條件、循環(huán)等特性，基本上可以滿足我們的絕大多數(shù)場景。
結(jié)尾
HTML Webpack Plugin 是被廣泛使用的 webpack 插件，用來將我們打包出來的文件自動(dòng)嵌入到一個(gè)模板 HTML 中。
實(shí)際開發(fā)中，通常我們會(huì)使用自己編寫的 html 模板。
