TL;DR:: Add the (s)css dependency to your main (s)css file and specify where to find the fonts too. Then use the proper loaders in your webpack.config.js file.

The past few days I had trouble loading the font-awesome fonts with webpack. I tried quite a few solutions:

Nothing seemed to work propoerly. I either had the fonts ignored or got errors of files not found.

Finally, I have the following combination which works (webpack 2.2.0):

In my main SCSS file I have:

$fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome.scss';

In my webpack.config.js:

const rules = {
  // ...
  componentStyles: {
    test: /\.scss$/,
    loaders: ['style-loader', 'css-loader', 'sass-loader'],
    exclude: path.resolve(__dirname, 'src/app')
  },
  fonts: {
    test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    loader: 'file-loader?name=fonts/[name].[ext]'
  }
  // ...
}

const config = (module.exports = {})

config.module = {
  rules: [
    // ...
    rules.componentStyles,
    rules.fonts
    // ...
  ]
}

Note the loaders in the config for scss. If you use the raw loader, the imports will not be parsed and dependent fonts will not be discovered.

More complete files are here.

HTH,