版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/An_cf/article/details/84856199
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-loader,如果文件小于这个参数,那么就以Data Url的方式直接构建到文件中。如果字体太大,不建议在product环境中使用。
2.使用file-loader进行配置,如下:
module: {
rules: [
// 省略其他配置...
// font-awesome
{
test: /\.(eot|svg|ttf|woff|woff2)\w*/,
loader: 'file-loader?publicPath=/static/res/&outputPath=font/'
},
// 省略其他配置...
]
}
通过设置字体编译输出的目录路径,引用时引用对应路径下的字体文件。
------看到这里我的问题也已经解决了,希望对你也有所帮助