Webpack4升级至5后file-loader生成字体路径错误求助

问题背景 #

Webpack 4 项目升级至 5.52.1 版本后，使用 file-loader 处理字体文件（woff/woff2/ttf/eot）时，字体被生成在项目根目录，而非配置指定的 /fonts 子目录。当前配置需动态获取主题名生成多输出路径，Webpack 5 内置的 generator 方案无法满足需求。

核心原因 #

Webpack 5 内置了资源模块（Asset Modules），会默认接管字体、图片等资源文件的处理逻辑，直接覆盖 file-loader 的配置，导致自定义路径规则失效。

解决步骤 #

1. 禁用内置资源模块干扰 #

在对应的 rule 中添加 type: 'javascript/auto'，强制让 file-loader 接管资源处理，绕过 Webpack 5 的内置模块：

{
  test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
  type: 'javascript/auto', // 关键配置：禁用内置资源模块
  use: info => {
    const theme = path.basename(info.issuer, path.extname(info.issuer));
    return [{
      loader: 'file-loader',
      options: {
        name: '[name]_[hash].[ext]',
        outputPath: () => `root/link/to/theme/${theme}/dist/fonts`,
        publicPath: '../fonts'
      }
    }];
  }
},

2. 简化 outputPath 逻辑 #

原配置中 outputPath 接收的 url 参数是最终生成的文件名，而非原始路径，因此可以直接返回目标目录路径，无需额外拼接。也可以将完整路径整合到 name 字段中，写法更直观：

options: {
  // 将完整输出路径整合到 name 字段
  name: `root/link/to/theme/${theme}/dist/fonts/[name]_[hash].[ext]`,
  publicPath: '../fonts'
}

3. 校验 publicPath 匹配度 #

确保 publicPath 与 CSS 文件的输出路径匹配：如果 CSS 文件生成在 root/link/to/theme/${theme}/dist/css 目录，../fonts 可正确指向同级的 fonts 目录；若路径结构调整，需同步修改 publicPath 的相对路径或改用绝对路径。

额外说明 #

若后续计划迁移到 Webpack 5 内置资源模块，可通过 module.rules 中的 generator.filename 结合 issuer 条件实现多路径输出，但当前场景下保留 file-loader 配合 type: 'javascript/auto' 是更直接的兼容方案。

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