webpack配置字体编译问题

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/'
    },
    // 省略其他配置...
  ]
}

通过设置字体编译输出的目录路径,引用时引用对应路径下的字体文件。

------看到这里我的问题也已经解决了,希望对你也有所帮助

你可能感兴趣的:(前端开发)