webpack with icomoon does not work

Question

T try to compile generated fonts by icomoon with webpack, but with the following webpack config does not get executed. I'm using url-loader and file-loader to generate output but the test are failing at the end

var webpack = require('webpack'),
    autoprefixer = require('autoprefixer'),
    OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    path = require('path');



const sassLoaders = [
    'css-loader!autoprefixer-loader?browsers=last 2 version',
    'postcss-loader',
    'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, '.')
]

const config = {
    entry: {

        app: ['./js/app']
    },
    module: {
        loaders: [
            {
                test: /\.css$/i,
                loader: ExtractTextPlugin.extract("css-loader!autoprefixer-loader")
            },
            {
                test: /\.sass$/,
                loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            },

            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/icon-woff" }
        ]
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname, './build'),
        publicPath: '/bundles/build/'
    },
    amd: {jQuery: true},
    plugins: [
        new ExtractTextPlugin('[name].css'),
        //new OptimizeCssAssetsPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
    ],
    postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],
    resolve: {
        alias: {
            jquery: 'node_modules/jquery/dist/jquery.js',
            magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
        },

        modulesDirectories: ['./js', 'node_modules'],
        extensions: ['', '.js', '.sass'],
        root: [path.join(__dirname, './')]
    }
}

module.exports = config;

I add the font as is shown here

  @font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?9ht85s');
    src:    url('../fonts/icomoon.eot?9ht85s#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?9ht85s') format('truetype'),
    url('../fonts/icomoon.woff?9ht85s') format('woff'),
    url('../fonts/icomoon.svg?9ht85s#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }

so is complaining becuase of suffixes, I remove suffixes getting compiled but no font shows

when I run weppack -w I get

ERROR in ./fonts/icomoon.ttf?9ht85s
Module parse failed: fonts\icomoon.ttf?9ht85s Unexpected character
' ' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' ' (1:0)

Answer 1

Just found the solution :)

Your regex is not matching the font url of your @font-face. So it's another loader which tries to parse your font files.

Change your loader with this regex, it should work:

{
  test: /\.woff(2)?(\?[a-z0-9]+)?$/,
  loader: "url-loader?limit=10000&mimetype=application/font-woff"
}, {
  test: /\.(ttf|eot|svg)(\?[a-z0-9]+)?$/,
  loader: "file-loader"
}