webpack配置字体编译问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 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/'
    },
    // 省略其他配置...
  ]
}

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

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