如何在React.js中通过Webpack加载Fontello字体？配置报错求助

嘿，我来帮你搞定这个Fontello图标字体加载失败的问题！咱先揪出问题根源：你给字体文件（eot/svg/ttf/woff这些）配置了style-loader!css-loader，但这俩loader是用来解析CSS代码的，根本不适合处理字体这种二进制资源，这就是报错的核心原因。

解决方案步骤： #

• 第一步：安装正确的资源处理loader
  你需要安装file-loader（负责把字体文件复制到打包输出目录），或者url-loader（能把小体积字体转成base64嵌入代码，减少网络请求）。打开终端执行：

  npm install file-loader --save-dev
  

• 第二步：修改开发环境webpack.config的字体加载规则
  把原来的字体loader配置替换成下面的代码：

  module: {
    loaders: [
      // 其他loader配置保持不变...
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/' // 把字体统一输出到打包后的fonts目录，方便管理
        }
      }
    ]
  }
  

• 第三步：修改生产环境webpack.production.config的字体加载规则
  生产环境里的ExtractTextPlugin是用来提取CSS的，和字体资源无关，同样替换字体的loader配置：

  module: {
    loaders: [
      // 其他loader配置保持不变...
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext]', // 生产环境加hash值，利于浏览器缓存
          outputPath: 'fonts/'
        }
      }
    ]
  }
  

额外注意事项： #

• 如果你用了Fontello生成的CSS文件，记得检查CSS里引用字体的路径是否正确。比如你把字体输出到fonts/目录，CSS里的url()应该写成./fonts/your-font-name.eot这类相对路径。
• 如果想用url-loader代替file-loader，可以把loader改成url-loader?limit=10000，意思是小于10KB的字体转成base64嵌入代码，大于10KB的就用file-loader输出为单独文件。

内容的提问来源于stack exchange，提问作者vinod joshi