时间戳

首页 > 解决方案 > 更改 webpack 5 生成的字体

webpack - 更改 webpack 5 生成的字体

问题描述

我正在使用 webpack 5，并试图使其与 webfonts 一起使用。

输出目录是这样的：

wwwroot
  bin
    mybundle.css
    mybundle.js
  fonts
    roboto.woff
    roboto.woff2

输出：

output: {
  path: path.join(__dirname, './wwwroot/'),
  publicPath: '',                           // prevents "Error: Automatic publicPath is not supported"
  // ...
},

解析器：

{
  test: /\.woff2?$/i,
  type: 'asset/resource',
  generator: { filename: 'bin/[base]' },
}

一切似乎都有效，除了生成的字体是错误的：

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

它生成url(fonts/roboto.woff2)而不是url(/wwwroot/fonts/roboto.woff2). 所以css不会找到webfonts。

我如何在前面加上一个/wwwroot/？

标签： webpackwebpack-5

解决方案

解决方案：

output: {
  publicPath: '/wwwroot/',
  // ...
},

推荐阅读