无法使用 Webpack 加载 font-awesome [重复]

尝试使用 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" }

要正确加载 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" 
      },
    ]
  }
};

为此，您需要 npm install font-awesome-sass-loadernpm i font-awesome-sass-loader您还需要 url-loadernpm i url-loader和文件加载器npm i file-loader