webpack使用ttf-loader引入TTF字体转Base64出现模块解析报错咨询

你遇到的报错核心有两个：

1. ttf-loader 处理完字体文件后输出的是调用createFontFamily的JS代码，这段输出不符合你当前webpack的模块解析规则，导致解析失败
2. 你的需求是直接拿到字体文件的Base64内容，ttf-loader本身不提供这个能力，它的作用是生成字体家族配置、返回字体资源的访问地址，完全不符合你的使用场景。

第一步：修改webpack配置，替换loader #

你不需要用ttf-loader，直接用webpack内置的asset/inline资源类型（webpack 5及以上版本适用），可以直接把资源转为Base64导出：

addWebpackModuleRule({
  test: /\.ttf$/,
  type: 'asset/inline'
})

如果你用的是webpack 4及以下版本，用url-loader即可：

addWebpackModuleRule({
  test: /\.ttf$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: Infinity, // 强制所有ttf文件都转base64，不单独输出为独立文件
        mimetype: 'application/octet-stream'
      }
    }
  ]
})

第二步：修改业务代码 #

修改后的loader会直接返回字体文件的Base64字符串，不需要你自行调用btoa转换：

import fontBase64 from '../assets/fonts/font.ttf'

const someFun = () =>{
    // 这里的fontBase64已经是完整的data:xxx格式的Base64字符串，直接使用即可
    return fontBase64;
}

特殊场景适配 #

如果你确实需要同时用到ttf-loader的字体家族能力和Base64内容，可以给ttf文件配置两条规则，通过资源查询参数区分不同的处理逻辑：

addWebpackModuleRule({
  test: /\.ttf$/,
  resourceQuery: /inline/, // 匹配 import xx from 'xxx.ttf?inline' 的引入
  type: 'asset/inline'
}),
addWebpackModuleRule({
  test: /\.ttf$/,
  resourceQuery: { not: [/inline/] }, // 匹配不带inline参数的引入
  use: ['ttf-loader']
})

使用的时候按需加参数即可：

// 拿base64内容
import fontBase64 from '../assets/fonts/font.ttf?inline'
// 拿ttf-loader返回的字体配置
import fontConfig from '../assets/fonts/font.ttf'

内容的提问来源于stack exchange，提问作者hernesupp