Webpack 5处理字体出现解码失败与OTS解析错误问题咨询

问题根因 #

你遇到的问题核心是Webpack 5内置的Asset Module资源处理能力和旧版file-loader配置冲突，导致字体资源被重复处理。

问题1：现象是否符合预期 #

该现象完全不符合预期，属于资源重复处理导致的异常：

• 你配置的file-loader会正常将字体输出到fonts/目录下的正确命名文件
• Webpack 5默认对字体、图片等资源启用asset/resource内置处理规则，没有显式禁用的情况下，会二次处理woff/woff2文件，生成带哈希的、内容为JS导出语句的伪字体文件，CSS中引用的就是这个错误的JS模块文件

问题2：报错原因 #

浏览器请求到的带哈希woff文件本质是JS模块，不是二进制字体文件，所以解析字体格式时直接报错，和你看到的文件内容完全对应。

修复方案 #

二选一即可，优先推荐方案2：

方案1：保留file-loader，禁用内置Asset Module处理 #

修改字体处理规则，添加type: 'javascript/auto'关闭Webpack 5对该类资源的默认处理：

{
  test: /\.(woff|woff2)$/,
  type: 'javascript/auto', // 新增这一行
  use: {
    loader: 'file-loader',
    options:{
      name: '[name].[ext]',
      publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../', // 建议打开该配置，保证CSS中引用路径正确
      outputPath: './fonts/',
    }
  },
},

方案2：移除file-loader，直接使用Webpack 5内置Asset Module #

Webpack 5的Asset Module已经完全可以替代file-loader，无需额外安装依赖，直接替换原字体处理规则即可：

{
  test: /\.(woff|woff2)$/,
  type: 'asset/resource',
  generator: {
    filename: 'fonts/[name][ext]',
    publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
  }
}

修改配置后重新构建，就不会再生成多余的带哈希伪字体文件，CSS里的url会直接指向fonts目录下的正确字体文件，报错会自动消失。

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