1.问题描述:
在做公司的项目开发的时候遇到一个问题,字体加载失败报错404,如下:
2.问题原因:
起初没怎么在意,感觉应该是项目中引用了bootstrap的cdn字体或者是font-awesome的字体,之后找了好久发现并不是引用网络字体造成的,于是看到请求路径是项目的根目录,才灵光一现觉察到这是一个路径问题,因为没有找到这个路径下的字体文件它才会报错404,项目整体架构用的是superset二次开发基于react、webpack打包。一开始走了弯路,不过还好,没有浪费太多时间,索性记录一下。
3.解决问题:
首先让我们来看一下,webpack字体打包的配置方式,大致两种---
----1.使用url-loader进行配置,如下:
module: {
rules: [
// 省略其他配置...
// font-awesome
{
test: /\.(eot|svg|ttf|woff|woff2)\w*/,
loader: 'url-loader?limit=1000000'
},
// 省略其他配置...
]
}
这里给url-loader传递了一个参数limit,并且设置得比较大,这个数字可以自定义,但是一定要保证大于最大字体文件的大小,因为这个参数是告诉url-l