无法使用Webpack加载font-awesome字体图标库

Question

尝试使用Webpack加载font-awesome会导致以下错误：

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3
Module parse failed: ...\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.6.3 Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

我正在尝试在React组件中导入font-awesome，代码如下：

import "font-awesome/scss/font-awesome.scss";

这是我的webpack.config.js文件。我想把font-awesome和相关资源与其他内容分开加载，原因是我已经使用babel加载了SVG，但不想这样做font-awesome。

{
    test: /\.scss/,
    loader: ExtractPlugin.extract("style", "css!sass")
},
{
    test: /\.svg$/,
    loader: "babel!svg-react",
    exclude: /node_modules/
},
{
    test: /\.ttf$/,
    loader: "file-loader?mimetype=application/octet-stream&name=[name].[ext]",
    exclude: /node_modules/
},
{
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=application/font-woff&name=[name].[ext]",
    exclude: /node_modules/
},
{
    test: /\.(otf|eot|png|svg|ttf|woff|woff2)(\?[\s\S]+)?$/,
    loader: "url?limit=10000",
    include: "node_modules/font-awesome/fonts"
}

我也尝试过这样做正则表达式，但它并没有起作用:

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000" }

- Justin Smith

Answer 1

为了正确加载font-awesome字体，您需要在webpack.config.js中配置加载器以使用url-loader和file-loader。例如：

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls. 
      // the file-loader emits files. 
      { 
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
        loader: "url-loader?limit=10000&mimetype=application/font-woff" 
      },
      { 
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
        loader: "file-loader" 
      },
    ]
  }
};

要做到这一点，您需要安装font-awesome-sass-loader：npm i font-awesome-sass-loader，同时还需要url-loader：npm i url-loader和file-loader：npm i file-loader

- mchavezi

Answer 2

在尝试了很多例子后，这个对我有效：

  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },

当然，您需要在主文件中导入Font Awesome。

  import 'font-awesome/css/font-awesome.css';

也不要忘记安装加载器。

  npm install url-loader --save-dev

- ghaliano

---

你不能只用一行代码 (ttf|eot|svg|woff2?) 来完成吗？ - The Guy with The Hat

Answer 3

尝试使用 file-loader 加载你的 .eot 文件，而不是 url-loader。

例子:

module: {
    loaders: [
        {
            test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
            loaders: ['file']
        }
    ]
}

- adriennetacke

---

为什么我们应该使用 file-loader 而不是 url-loader？ - mcanvar

@crx4 请查看 https://dev59.com/i1UM5IYBdhLWcg3wQeiJ - Thaddeus Albers