Can't load font-awesome with Webpack
<p>Trying to load font-awesome with webpack gives me this error:</p>

<pre><code>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.
</code></pre>

<p>I'm trying to import font-awesome in a React component like this:</p>

<pre><code>import "font-awesome/scss/font-awesome.scss";
</code></pre>

<p>Here's what my webpack.config.js looks like. I wanted to load font-awesome and related assets separately from everything else, namely because I'm already loading SVGs with babel, but didn't want to do that with font-awesome.</p>

<pre><code>{
    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&amp;name=[name].[ext]",
    exclude: /node_modules/
},
{
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&amp;mimetype=application/font-woff&amp;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"
}
</code></pre>

<p>I've tried doing the regex like this too and it didn't work: </p>

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