今天介绍 webpack 的一个最常用的插件：HTML Webpack Plugin。
说它是使用 webpack 开发前端项目必不可少的插件也不为过，因为它可以自动帮我们将 webpack 打包生成的文件(比如 js 文件、css 文件)嵌入到 html 文件中。
这在生成的文件带有哈希串时尤为有用。
在 webpack 配置文件引入 HtmlWebpackPlugin 插件，然后在 plugins 数组中通过 new HtmlWebpackPlugin() 加入 HtmlWebpackPlugin 实例对象即可。
复制
// webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: {filename: 'app.[contenthash:8].js',
}, mode: 'production', plugins: [new HtmlWebpackPlugin()
],
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
我们执行 npx webpack 命令后，webpack 额外给我们生成了一个 dist/index.html 文件。该 html 文件格式化后得到的内容为：
复制
<!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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
可以看到将打包好的 app.js 文件被自动嵌入到 head 元素下最后一个子元素位置。
这里打包文件名尾部被添加了内容哈希串，这意味着每次项目的内容发生变化，哈希串的值都不同。
试想下，如果你自己管理 html 文件，每次都要改这个 js 文件名，是要多累，还好有 HtmlWebpackPlugin 帮忙。
当然前面这种只是 HtmlWebpackPlugin 插件的默认用法，我们可以做更具体的定制化。
我们需要传入一个配置对象来进行模板渲染定制化。
HtmlWebpackPlugin 的配置非常丰富，不过常用的就几个。
复制
plugins: [ new HtmlWebpackPlugin({title: '前端西瓜哥的博客',favicon: 'static/favicon.ico',
}),
],
1.
2.
3.
4.
5.
6.
titile：设置网页标题。
filename：生成 html 文件名，默认值为 index/html。
template：使用自己的模板，这里填这个模板的路径，使用了之后一些配置项就无效了，比如 title。
favicon：指定网站图标路径，除了会在 html 上填充 favicon 相关内容，还会将该文件拷贝到打包文件夹下，非常好用。
minify：是否压缩 html 文件。不设置时，如果 webpack 的 mode 为 production，就会压缩 html，移除多余的空格和注释之类的。
在实际开发中，通常是创建一个 index.html 提供给 HtmlWebpackPlugin 插件作为模板。
这样的话，title 等配置和一些更细碎的内容就可以直接写到 html 上。相比配置，直接在 html 上编辑要更直观些。
我们在根目录创建一个 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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
这样就可以直接在 html 模板上添加 title，以及一些 cdn 形式的第三方库。
webpack.config.js 配置改为：
复制
plugins: [ new HtmlWebpackPlugin({template: 'index.html'
}),
],
1.
2.
3.
4.
5.
生成的 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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
第三方库建议使用自己本地项目的，会更稳定和安全些，比如上面就建议改为<script src="static/jquery-3.6.0.min.js"></script>。
这里会用到一个 copy-webpack-plugin 插件将一些文件或文件夹拷贝到打包目录下。关于这个插件我会另外专门写一篇文章讲解，这里不展开。
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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
配置改为：
复制
plugins: [ new HtmlWebpackPlugin({template: 'index.html',title: '前端西瓜哥的博客',// 下面这个是自定义属性saySomething: 'Stay hungry, stay foolish'
}),
],
1.
2.
3.
4.
5.
6.
7.
8.
将传入给 HtmlWebpackPlugin 的配置属性会成为 htmlWebpackPlugin.options 对象下的属性，嵌入到模板 html 下。
所以这里的生成结果是：
复制
<!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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
因为使用了 lodash.template 模板渲染丰富，除了可以嵌入变量的值，还支持判断条件、循环等特性，基本上可以满足我们的绝大多数场景。
HTML Webpack Plugin 是被广泛使用的 webpack 插件，用来将我们打包出来的文件自动嵌入到一个模板 HTML 中。
实际开发中，通常我们会使用自己编写的 html 模板。