本文摘要：主要讲解在不需要引入额外的loader的条件下运用Webpack 5 如何高效处理字体图标、图片资源的方法与步骤。
程序员优雅哥(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/resource
。
asset
和
asset/resource
的区别就是，后者只做拷贝，不能配置转base64。
重新执行打包命令，可以看到
dist
目录下只有一张图片，因为 img1 和 img3 都小于10kb，被转为base64了。在浏览器测试访问，显示正常。
总而言之，webpack 5 默认可以处理图片和字体图标等资源，不需要引入额外的loader，定制化打包只需要简单配置即可。
今日优雅哥（youyacoder）学习结束，期待关注留言分享~~