webpack 插件配置——HTML Webpack Plugin

简介: 前端西瓜哥

今天介绍 webpack 的一个最常用的插件:HTML Webpack Plugin。

说它是使用 webpack 开发前端项目必不可少的插件也不为过,因为它可以自动帮我们将 webpack 打包生成的文件(比如 js 文件、css 文件)嵌入到 html 文件中。

这在生成的文件带有哈希串时尤为有用。

在 webpack 配置文件引入 HtmlWebpackPlugin 插件,然后在 plugins 数组中通过 new HtmlWebpackPlugin() 加入 HtmlWebpackPlugin 实例对象即可。

// 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()
  ],
}

我们执行 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>

可以看到将打包好的 app.js 文件被自动嵌入到 head 元素下最后一个子元素位置。

这里打包文件名尾部被添加了内容哈希串,这意味着每次项目的内容发生变化,哈希串的值都不同。

试想下,如果你自己管理 html 文件,每次都要改这个 js 文件名,是要多累,还好有 HtmlWebpackPlugin 帮忙。

当然前面这种只是 HtmlWebpackPlugin 插件的默认用法,我们可以做更具体的定制化。

一些常用的属性

我们需要传入一个配置对象来进行模板渲染定制化。

HtmlWebpackPlugin 的配置非常丰富,不过常用的就几个。

plugins: [
  new HtmlWebpackPlugin({
    title: '前端西瓜哥的博客',
    favicon: 'static/favicon.ico',
  }),
],
  • titile:设置网页标题;
  • filename:生成 html 文件名,默认值为 index/html
  • template:使用自己的模板,这里填这个模板的路径,使用了之后一些配置项就无效了,比如 title;
  • favicon:指定网站图标路径,除了会在 html 上填充 favicon 相关内容,还会将该文件拷贝到打包文件夹下,非常好用;
  • minify:是否压缩 html 文件。不设置时,如果 webpack 的 mode 为 production,就会压缩 html,移除多余的空格和注释之类的。

使用自定义 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>

这样就可以直接在 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>

第三方库建议使用自己本地项目的,会更稳定和安全些,比如上面就建议改为  <script src="static/jquery-3.6.0.min.js"></script>

这里会用到一个 copy-webpack-plugin 插件将一些文件或文件夹拷贝到打包目录下。关于这个插件我会另外专门写一篇文章讲解,这里不展开。

自定义 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: '前端西瓜哥的博客',
    // 下面这个是自定义属性
    saySomething: 'Stay hungry, stay foolish'
  }),
],

将传入给 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>

因为使用了 lodash.template 模板渲染丰富,除了可以嵌入变量的值,还支持判断条件、循环等特性,基本上可以满足我们的绝大多数场景

结尾

HTML Webpack Plugin 是被广泛使用的 webpack 插件,用来将我们打包出来的文件自动嵌入到一个模板 HTML 中。

实际开发中,通常我们会使用自己编写的 html 模板。

我是前端西瓜哥,热衷于分享前端知识,欢迎关注我。

相关文章
|
28天前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
40 5
|
28天前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分,实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置,以满足不同的构建和优化要求。
37 2
|
28天前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
26 3
|
1月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
49 6
|
1月前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
68 7
|
1月前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
1月前
|
测试技术 开发者
如何确保 Webpack plugin 与其他插件的兼容性?
【10月更文挑战第23天】确保 Webpack plugin 与其他插件的兼容性需要从多个方面进行考虑和努力。通过遵循规范、进行充分测试、保持沟通协作等方式,
|
1月前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
39 2
|
1月前
|
算法 测试技术 开发者
编写 Webpack plugin 时需要注意什么?
【10月更文挑战第23天】 编写 Webpack plugin 需要综合考虑多个方面的因素。只有在充分理解和掌握这些要点的基础上,才能编写出高质量、可靠且实用的 Plugin,为 Webpack 构建过程带来更多的价值和便利。
|
1月前
|
搜索推荐 测试技术 开发者
写一个 webpack plugin
【10月更文挑战第23天】编写一个 Webpack plugin 需要对 Webpack 的工作原理和机制有深入的了解,同时需要具备良好的编程能力和逻辑思维。通过合理设计和实现,Plugin 可以为我们的 Webpack 构建过程带来更多的灵活性和个性化。