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

程序员优雅哥(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）学习结束，期待关注留言分享~~