Vue 项目之 Webpack 打包字体资源

如果我们需要使用某些特殊的字体或者字体图标，就需要引入很多字体相关的文件，对于这些文件的处理其实和前面打包图片文件时的处理方式是一样的。

这里我们可以从阿里图标库中下载几个字体图标：

下载下来的压缩包解压之后，我们把里面的 iconfont.css 和 iconfont.ttf 文件添加到我们项目的 src/font 文件夹下：

有了字体文件之后，我们就可以使用它了，我们可以来到 ./src/js/element.js 文件中，添加一些代码：

import '../css/style.css';
import '../css/title.less';
import '../css/image.css';
// 导入字体文件，以加入 webpack 的依赖图中，这样下面使用的字体文件中的 class 才会生效
import '../font/iconfont.css';

...

// 创建一个 i 元素
const iEl = document.createElement('i');
// iconfont 对应的是 iconfont.css 文件中的 iconfont 类，该类指定了自定义的 font-family: "iconfont"
// icon-ashbin 对应的是一个“垃圾桶”字体图标
iEl.className = "iconfont icon-ashbin";

document.body.appendChild(divEl);
document.body.appendChild(bgDivEl);
document.body.appendChild(imgEl);
document.body.appendChild(iEl);
// const nodes = [divEl, bgDivEl, imgEl, iEl];
// document.body.append(...nodes);

然后我们先删除项目中的 ./build 文件夹，再来执行 npm run build 命令打包：

你会看到打包报错了，因为我们使用了新的模块（.ttf 文件），因此需要使用合适的 loader 来处理这种类型的文件。我们有两种方案可供选择：

1. 使用 file-loader；
2. 使用 Asset Modules；

1. 使用 file-loader 处理字体文件

我们在 webpack.config.js 文件中添加处理字体文件（包括 .ttf、.eot、.woff、.woff2 等）的对应规则：

...

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(ttf|eot|woff2?)$/, // 匹配各种字体文件
        use: {
          loader: 'file-loader',
          options: {
            name: 'font/[name]_[hash:6].[ext]'
          }
        }
      }
    ]
  }
}

配置完成后，再来执行 npm run build 命令打包：

这次就能成功打包了，并且已经把字体文件打包进了输出目录下的 font 文件夹中。浏览器中也能看到对应的字体图标了：

2. 使用 Asset Modules 处理字体文件

除了可以使用 file-loader 处理字体文件，我们也可以使用 webpack5 中的 Asset Modules 处理字体文件：

...

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(ttf|eot|woff2?)$/, // 匹配各种字体文件
        type: 'asset/resource',
        generator: {
          filename: 'font/[name]_[hash:6][ext]' // 指定打包后文件存放的文件夹和文件名
        }
      }
    ]
  }
}

一般情况下，字体文件不管大小如何，都不会做 base64 编码，而是会进行单独打包，因此我们使用 asset/resource 类型的 Asset Modules。

配置完成后，我们先删除项目中的 ./build 文件夹，再来执行 npm run build 命令打包，最终的效果和前面使用 file-loader 是一样的：

以上，就是对字体文件进行打包的两种方式。