更改 webpack 5 生成的字体

Question

我正在使用 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 不会找到网络字体。

如何在前面添加 /wwwroot/？

Answer 1

解决方法：

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

更改 webpack 5 生成的字体

Change font-face generated by webpack 5

webpack

webpack-5