Webpack file loader not recognized

Question

I am trying to build my project using webpack and thus far I am loving it. However, now that I am trying to include font-awesome, it is annoying me quite a bit.

I have installed font-awesome through npm, and I have imported it into my project using import 'font-awesome/css/font-awesome.css'. Webpack then tries to include that file, but fails to find the appropriate loader for the font files. Here is my webpack.config.js:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var extractScss = new ExtractTextPlugin('bundle.css');

module.exports = {
    entry: './app/app.tsx',
    output: {
        path: 'dist',
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.ts', '.js', '.tsx']
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.ts(x?)$/,
                loader: 'babel?presets[]=es2015!ts'
            },
            {
                test: /\.scss$/,
                loader: extractScss.extract(['css', 'sass'])
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url?limit=10000&minetype=application/font-woff'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'app/index.ejs',
            inject: false,
            appMountId: 'root'
        }),
        new ExtractTextPlugin('bundle.css')
    ]
};