Webpack5 处理字体图标、图片资源 | Webpack干货系列

程序员优雅哥简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享vue、Java等前后端技术和架构。
本文摘要：主要讲解运用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&#