Webpack 5生成的@font-face字体路径错误，如何为其添加/wwwroot/前缀？

我来帮你搞定这个字体路径的问题，核心是调整Webpack的publicPath配置以及字体资源的输出路径设置，分两种方案给你：

方案1：全局设置公共路径前缀（适合所有资源都需要/wwwroot/前缀的场景） #

你之前把publicPath设为空是为了避免自动路径的错误，但其实设置成绝对路径前缀就可以解决问题，同时还要修正字体资源的输出目录（你当前的配置会把字体打包到bin目录，和你的目标结构不符）：

// 修改output配置
output: {
  path: path.join(__dirname, './wwwroot/'),
  publicPath: '/wwwroot/', // 全局添加/wwwroot/前缀
  // ...其他原有配置
},

// 修正字体资源解析器配置
{
  test: /\.woff2?$/i,
  type: 'asset/resource',
  generator: { 
    filename: 'fonts/[base]' // 将字体输出到wwwroot/fonts目录下，匹配你的目录结构
  },
}

配置完成后，Webpack会自动为所有资源的引用路径加上/wwwroot/前缀，最终生成的@font-face会变成：

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wwwroot/fonts/roboto.woff2) format("woff2");
}

方案2：只为字体资源单独设置前缀（如果其他资源不需要这个前缀） #

如果你不想全局修改publicPath，可以在字体资源的生成配置里单独指定publicPath：

// 保持output的publicPath不变
output: {
  path: path.join(__dirname, './wwwroot/'),
  publicPath: '',
  // ...其他原有配置
},

// 修改字体资源解析器配置
{
  test: /\.woff2?$/i,
  type: 'asset/resource',
  generator: { 
    filename: 'fonts/[base]', // 输出到wwwroot/fonts
    publicPath: '/wwwroot/' // 只为字体资源添加前缀
  },
}

这个方案只会给字体资源的引用路径加上/wwwroot/，不影响其他资源的路径。

关键说明 #

你之前的配置里generator.filename: 'bin/[base]'会把字体文件打包到wwwroot/bin目录，但你的目标结构是wwwroot/fonts，所以必须先修正这个输出路径，否则即使前缀对了，字体文件的实际位置也不对，还是会找不到。

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