font-awesome webpack SyntaxError: Invalid or unexpected token - npm

Question

I'm new to webpack and I'm having trouble getting font-awesome to install in my React set up.
Webpack V2.2.1
React starter kit
I've run:
npm install font-awesome --save-dev
Then in my main .scss file, I'm calling:
$fa-font-path: "~font-awesome/fonts";
#import "~font-awesome/scss/font-awesome";
And in my webpack.config.js I've got:
...
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff)(\?.*)?$/,
loader: 'file-loader',
...
But on compile: yarn start I get the error:
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.<anonymous> (..\build\webpack:\external "font-awesome\fonts\fontawesome-webfont.eot":1:1)
at __webpack_require__ (..\build\webpack:\webpack\bootstrap 4b3091487663b7b04c64:19:1)
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?
Any help would be amazing.

Answer 1

As wuxiandiejia said, the problem was solved here by using a relative path - Even though looking at the error output, webpack was already looking in the correct place with the ~ declaration. Strange.
So instead of:
$fa-font-path: "~font-awesome/fonts";
#import "~font-awesome/scss/font-awesome";
I've used:
$fa-font-path: "../../../node_modules/font-awesome/fonts";
#import "../../../node_modules/font-awesome/scss/font-awesome";
And all seems to work!