程序员优雅哥(youyacoder)简介:十年程序员,呆过央企外企私企,做过前端后端架构。分享vue、Java等前后端技术和架构。

本文摘要:主要讲解在不需要引入额外的loader的条件下运用Webpack 5 如何高效处理字体图标、图片资源的方法与步骤。

网页上需要使用到图片、字体图标等资源,有些网站还会使用到音频、视频等资源。在之前的webpack4版本,默认是不能处理图片资源的,需要额外配置loader(url-loader和file-loader)才能处理。在webpack 5中默认就可以支持对图片的处理,不需要引入额外的依赖。如果需要指定图片编码为base64、输出目录等,只需要简单的配置即可。

1 处理字体图标资源

粗俗的理解,字体图标就是给元素标签设置对应的class,就可以在页面上展示出图标来。本质上,字体图标也是一种字体。

1.1 添加字体图标文件

首先在阿里巴巴矢量图标库网站(Iconfont)上获取字体图标,具体步骤参考《在iconfont上获取图标资源》一文。通过该网站获取到的字体图标文件如下所示:

在浏览器中打开 demo_index.html,可以看到字体图标的使用:

1、将 iconfont.css 文件拷贝到 src/style/css目录下;

2、在src 目录下创建iconfont目录,并将 iconfont.css 中使用到的 iconfont.ttf文件拷贝到刚创建的 src/iconfont目录下;

3、修改 src/style/css/iconfont.css文件中对iconfont.ttf的引用路径:(第三行修改如下)

src: url('../../iconfont/iconfont.ttf?t=1654939069757') format('truetype');

4、在 main.js 文件中导入 iconfont.css

import './style/css/iconfont.css'

5、在 index.html 中使用字体图标

<span class="iconfont icon-mobile"></span>
<span class="iconfont icon-Notebook"></span>
<span class="iconfont icon-rili"></span>

1.2 使用webpack打包编译

yarn build

执行命令后,显示打包成功,说明 webpack5 默认便可以处理字体图标资源。在浏览器中访问 index.html,可以看到字体图标正常显示。

查看打包后的 dist 目录,会看到字体图标文件位于打包根路径下(dist目录中)。我们希望字体图标资源放在 dist/resources目录下。这就需要配置webpack了。

1.3 配置 webpack

在 webpack.config.js 中的 module.rules 中添加对字体图标文件的处理,指定输出文件名称:

  module: {
rules: [
...
{
test: /\.ttf$/,
type: 'asset/resource',
generator: {
filename: 'resources/[hash:10][ext][query]'
}
}
]
},

generator 指定输出的规则。 filename 表示输出的文件相对路径及名称,此处配置表示.ttf格式的文件,打包后放在 dist/resources目录下,名字为 hash 值的前10位。

再次打包运行,会发现 dist 目录下多了一个 resources目录,并且字体图标 ttf 文件位于该目录中。

在浏览器中访问index.html,字体图标显示正常。

其实不仅是字体图标文件,其他的媒体资源文件,如avi、mp3等资源,都可以使用该配置。故该配置可以修改 test 属性,使其处理多种格式的媒体资源。

{
test: /\.(avi|mp3|ttf|woff2?)$/,
type: 'asset/resource',
generator: {
filename: 'resources/[hash:10][ext][query]'
}
}

2 处理图片资源

2.1 添加并使用图标文件

1、在src目录下创建目录img,拷贝图片到该目录中。我准备了三张图片,分别是png、jpeg、svg

2、在 src/style/css下创建文件 img-demo.css样式文件,在该样式文件中定义三个样式类,每个样式类使用一个图片作为背景:

.img1 {
width: 200px;
height: 100px;
background: url("../../img/img1.png");
background-size: 100% 100%;
} .img2 {
width: 200px;
height: 100px;
background: url("../../img/img2.jpeg");
background-size: cover;
} .img3 {
width: 100px;
height: 100px;
background: url("../../img/img3.svg");
background-size: cover;
}

3、在 src/main.js中引入该样式文件:

import './style/css/img-demo.css'

4、在 template/index.html中创建三个div,并设置对应的class:

<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>

2.2 使用webpack编译打包

执行在第一节中配置的build命令:

yarn build

执行命令后,显示打包成功,说明 webpack5 默认便可以处理图片资源。在浏览器中访问 index.html,可以看到三个div背景图正常显示。

查看打包后的 dist 目录,看到三个图片文件都位于打包根路径下(dist目录中),这样显得比较杂乱,我们希望图片资源放在 dist/img目录下。这就需要配置webpack了。

2.3 配置 webpack

在 webpack.config.js 中的 module.rules 中添加对图片文件的处理,指定输出文件名称,并且在图片大小小于10kb时,将其转为base64放在js中(可以减少网络请求数):

{
test: /\.(png|jpe?g|gif|svg?)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024
}
},
generator: {
filename: 'img/[hash:10][ext][query]'
}
}

maxSize 就是指小于该大小的图片,就转为base64。这里要注意 type属性为 asset。上面处理字体图片等媒体资源时,type属性为asset/resourceassetasset/resource的区别就是,后者只做拷贝,不能配置转base64。

重新执行打包命令,可以看到dist目录下只有一张图片,因为 img1 和 img3 都小于10kb,被转为base64了。在浏览器测试访问,显示正常。

总而言之,webpack 5 默认可以处理图片和字体图标等资源,不需要引入额外的loader,定制化打包只需要简单配置即可。

今日优雅哥(youyacoder)学习结束,期待关注留言分享~~

Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源的更多相关文章

  1. Webpack干货系列 | 在 Webpack 5 集成 ESLint 的方法

    程序员优雅哥(youyacoder)简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解运用Webpack 5 中集成 ESLint 的方 ...

  2. Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解webpack 5 如何高效处理CSS 资源.scss/sass 资源.l ...

  3. Webpack学习系列 - Webpack5 怎么集成Babel ?

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要通过实操讲解运用Webpack 5 如何集成 Babel Babel 对于前端 ...

  4. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  5. webpack热更新问题和antd design字体图标库扩展

    标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...

  6. react+webpack 引入字体图标

    在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...

  7. webpack打包字体图标报错的解决办法

    webpack打包字体图标需要两个加载器  url-loader 和 file-loader 另外  字体图标的引入方式  本来应该是  url("....") 这样的方式,但是w ...

  8. webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法

    webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './',  即可,如图  element ui字体图标不显 ...

  9. 绝对干货!!css3字体图标—丰富的阿里图标库iconfont的使用详解

    在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...

随机推荐

  1. rabbitmq 安装延时队列插件rabbitmq-delayed-message-exchange

    1.下载rabbitmq-delayed-message-exchange(注意版本对应) 链接:https://github.com/rabbitmq/rabbitmq-delayed-messag ...

  2. Pytorch Linear ()简单推导

    pytorch,nn.Linear 下图中的A是权重矩阵,b是偏置. in_features输入样本的张量大小 out_features输出样本的张量大小 bias是偏置 # 测试代码 # batch ...

  3. 如何对用户的绑定的身份证真实性进行实名认证(java)

    现在随着对用户实名制的要求,因此用户提交的身份证信息经查需要检查是否为真实信息,我们需要对用户提交的身份证信息进行核验,具体操作步骤如下: 第一步 到认证平台注册账号:云亿互通--实名认证服务 (yu ...

  4. 【已解决】Redis错误:Could not create server TCP listening socket 127.0.0.1:6379: bind: 操作成功完成。

    报错:redis服务在window下启动,报错: Could not create server TCP listening socket 127.0.0.1:6379: bind: 操作成功完成. ...

  5. Redis源码漂流记(二)-搭建Redis调试环境

    Redis源码漂流记(二)-搭建Redis调试环境 一.目标 搭建Redis调试环境 简要理解Redis命令运转流程 二.前提 1.有一些c知识简单基础(变量命名.常用数据类型.指针等) 可以参考这篇 ...

  6. Flutter异步与线程详解

    一:前言 - 关于多线程与异步 关于 Dart,我相信大家都知道Dart是一门单线程语言,这里说的单线程并不是说Dart没有或着不能使用多线程,而是Dart的所有API默认情况下都是单线程的.但大家也 ...

  7. 从rocketmq入手,解析各种零拷贝的jvm层原理

    在上一篇文章中,主要介绍了rocketmq消息的存储流程.其主要使用了mmap的零拷贝技术实现了硬盘和内存的映射,从而提高了读写性能.在流程中有一个非常有意思的预热方法并没有详细分析,因为其中涉及到了 ...

  8. 项目中导入本地jar包问题

    1. 问题 一个Maven项目,需要依赖一个本地jar包,以如下方式引用: <dependency> <groupId>xxx.sdk</groupId> < ...

  9. python使用vosk进行中文语音识别

    操作系统:Windows10 Python版本:3.9.2 vosk是一个离线开源语音识别工具,它可以识别16种语言,包括中文. 这里记录下使用vosk进行中文识别的过程,以便后续查阅. vosk地址 ...

  10. el-form 中的数组表单验证(数组可动态添加删除)

    除了一些简单的表单验证之外,我们还会有一些稍微复杂点的多层级表单的验证,如下图所示可点击添加,删除对数组进行操作,当点击确定时需要验证每一条form-item不能为空 其tempalte部分主要代码如 ...