解决 Webpack 5 Asset Modules 字体文件报 404 找不到资源问题

老项目从 Webpack 4 升级到 Webpack 5,把静态资源 file-loader 换成了 Webpack 5 新增的 Asset Modules 特性:

1
2
3
4
5
6
7
8
9
10
11
12
13
  webpackChain
.rule('font-rule')
.test(/\.(ttf|eot|woff|woff2)$/)
- .use('file-loader')
- .loader('file-loader')
- .options({
- name: 'fonts/[contenthash].[ext]'
- })
+ .type('asset/resource')
+ .generator({
+ filename: 'fonts/[contenthash][ext]'
+ })
.end()

然而替换的过程没有那么顺利,编译打包虽然没有任何报错,但运行时字体文件报了 404。

阅读更多