Webpack加载字体失败 提示Failed to decode downloaded font如何解决

使用Webpack构建项目时字体资源加载异常，控制台持续抛出报错：Failed to decode downloaded font（已下载字体解码失败）。
当前使用的Webpack配置如下：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(csv|tsv)$/i,
        use: ['csv-loader'],
      },
      {
        test: /\.xml$/i,
        use: ['xml-loader'],
      },
    ],
  },
  mode: 'development'
};

该报错的核心触发逻辑是浏览器获取到的文件内容不符合对应字体格式的编码规范，无法正常解析，常见诱因有三类：

• css-loader/style-loader版本与Webpack 5内置的Asset Modules不兼容，或同时混用了旧版file-loader/url-loader处理字体，导致字体文件被错误转译为JS片段，不是合法的二进制字体内容
• 字体资源引用路径配置错误，开发服务器/生产服务收到字体请求后返回了HTML兜底页面（比如路由兜底的index.html）而非字体文件
• 引入的字体源文件本身损坏，或文件后缀与实际编码格式不匹配

按以下优先级逐一排查修复即可：

1. 补全静态资源输出配置
   在output节点新增assetModuleFilename字段，统一指定Asset Modules处理的静态资源输出路径和命名规则，避免路径拼接错误导致资源404：

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist'),
  // 新增该配置，所有asset/resource类型资源都会输出到dist/assets目录下
  assetModuleFilename: 'assets/[hash][ext][query]'
}

如果使用webpack-dev-server做本地开发，确认static配置项指向源码中的静态资源存放目录，保证字体资源请求能正确命中文件。

2. 排查loader版本与规则冲突
   将本地的css-loader、style-loader升级到适配Webpack 5的版本（css-loader ≥ 6.0.0，style-loader ≥ 3.0.0），执行以下命令升级：

npm install css-loader@latest style-loader@latest -D

检查所有loader规则，移除针对字体文件配置的旧版file-loader、url-loader规则，Webpack 5的asset/resource已经完全替代上述两个loader，重复配置会导致资源被二次处理出错。

3. 校验资源返回内容
   清除本地构建缓存（删除node_modules/.cache目录）和dist产物目录，重新启动构建后打开浏览器开发者工具的Network面板，筛选字体请求查看响应内容：

• 如果响应内容是HTML代码，说明路径配置错误，请求没有命中实际字体文件
• 如果响应内容是JS代码，说明存在loader规则冲突，有其他loader错误处理了字体文件
• 如果响应是二进制乱码，尝试重新下载替换字体源文件，排除文件本身损坏的问题

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