Webpack + angular 2 is not loading fonts correctly

Question

I am trying to configure latest Angular2 with webpack without usage of angular CLI. But when I try to build a project it always shows an errors regarding fontawesome fonts. For instance:

ERROR in ./Content/fonts/fontawesome-webfont.svg?v=4.7.0
Module parse failed: somewhere\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

Here is my webpack module configuration:

config.module = {
    loaders: [{
            test: /\.ts$/,
            loader: 'ts',
            query: {
                'ignoreDiagnostics': [
                    2403, // 2403 -> Subsequent variable declarations
                    2300, // 2300 -> Duplicate identifier
                    2374, // 2374 -> Duplicate number index signature
                    2375, // 2375 -> Duplicate string index signature
                    2502 // 2502 -> Referenced directly or indirectly
                ]
            },
            exclude: [/node_modules\/(?!(ng2-.+))/]
        },

        // copy those assets to output
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file?name=fonts/[name].[hash].[ext]?'
        },

        // Support for *.json files.
        {
            test: /\.json$/,
            loader: 'json'
        },

        // Load css files which are required in vendor.ts
        {
            test: /\.css$/,
            exclude: root('Scripts', 'app'),
            loader: "style!css"
        },

        // Extract all files without the files for specific app components
        {
            test: /\.less$/,
            loader: 'style!css!less'
        },

        // Extract all files for specific app components
        {
            test: /\.html$/,
            loader: 'raw'
        }
        // {
        //     test: /jquery\.js/,
        //     loader: 'null-loader',
        //     exclude: path.resolve('node_modules/jquery/')
        // }
    ],
    postLoaders: [],
    noParse: [/.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/, /angular2-polyfills\.js/, /jquery-ui\.js/, /jquery\.js/]
};

Version of webpack in package.json- "2.6.1"

Here is my component with reference to my less styles:

@Component({
  selector: 'my-app',
  template: require('./app.component.html'),
  styles: [require('../../../Content/custom/style.less')]
})
export class AppComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

change test in your config file.

test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?\S*)?$/,
            loader: 'file?name=fonts/[name].[hash].[ext]?'