title: font-awesome webpack SyntaxError: Invalid or unexpected token
body: <p>I'm new to webpack and I'm having trouble getting font-awesome to install in my React set up.</p>
  
  <pre><code>Webpack V2.2.1
  React starter kit
  </code></pre>
  
  <p>I've run:</p>
  
  <pre><code>npm install font-awesome --save-dev
  </code></pre>
  
  <p>Then in my main <code>.scss</code> file, I'm calling:</p>
  
  <pre><code>$fa-font-path: "~font-awesome/fonts";
  @import "~font-awesome/scss/font-awesome";
  </code></pre>
  
  <p>And in my <code>webpack.config.js</code> I've got:</p>
  
  <pre><code>...
      test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff)(\?.*)?$/,
      loader: 'file-loader',
  ...
  </code></pre>
  
  <p>But on compile: <code>yarn start</code> I get the error:</p>
  
  <pre><code>webpack: Compiled successfully.
  ..\node_modules\font-awesome\fonts\fontawesome-webfont.eot:1
  (function (exports, require, module, __filename, __dirname) { n�
                                                                 ^
  SyntaxError: Invalid or unexpected token
      at Object.exports.runInThisContext (vm.js:76:16)
      at Module._compile (module.js:542:28)
      at Object.Module._extensions..js (module.js:579:10)
      at Module.load (module.js:487:32)
      at tryModuleLoad (module.js:446:12)
      at Function.Module._load (module.js:438:3)
      at Module.require (module.js:497:17)
      at require (internal/module.js:20:19)
      at Object.&lt;anonymous&gt; (..\build\webpack:\external "font-awesome\fonts\fontawesome-webfont.eot":1:1)
      at __webpack_require__ (..\build\webpack:\webpack\bootstrap 4b3091487663b7b04c64:19:1)
  </code></pre>
  
  <p>Is this a problem with my webpack setup? A problem with the loaders? Or a problem with paths? Or a problem with the fonts themselves?</p>
  
  <p>Any help would be amazing.</p>