File-loader does not work with my fonts

Question

I have a typical Webpack file with a loaders module for fonts, images, css as follows:

  module: {
loaders: [{
  test: /\.jsx?$/,
  loaders: ['react-hot', 'babel-loader?

presets[]=es2015,presets[]=stage-1,presets[]=stage-2,presets[]=react,plugins[]=transform-runtime'],
      exclude: /node_modules/
    },

working code:

    { test: /\.scss$/,
      exclude: /node_modules/,
      loader: ExtractTextPlugin.extract('style', 'css!sass?sourceMap')
    },
   {
       test: /\.(jpg|jpeg|gif|png|svg)$/,
       exclude: /node_modules/,
       include: PATHS.imagesLoc,
       loader: "file-loader?name=img/[name].[ext]"
   },

Not working:

{
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      exclude: /node_modules/,
      loader: 'file-loader?limit=1024&name=fonts/[name].[ext]'
    },
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      exclude: /node_modules/,
      loader: "file-loader?limit=1024&name=fonts/test/[name].[ext]"
    }
  ]},
  plugins: [
    new webpack.DefinePlugin({
      'process.env.COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET)
    }),
    new CopyWebpackPlugin([
      { from: 'images/', to: 'img/' }
    ]),
    new ExtractTextPlugin("css/custom.css")
 ]
};

My root folder contains the following directories:

const PATHS = {
  app: path.join(__dirname, './enter.js'),
  build: path.join(__dirname, './public'),
  fonts: path.join(__dirname, './fonts'),
  cssLoc: path.join(__dirname, './styles'),
  imagesLoc: path.join(__dirname, './images')
};

Both image and style loaders are working just fine but for some reason none of the font files get transpiled into the public/fonts directory.

Just like my image and style folders the fonts directory sits within the app root. Inside the ./fonts I have two folders with their font contents ./fonts/roboto, ./fontawesome. These directories need to reflect inside ./public/ but for now I am not even able to get the fonts copied into the ./public directory so you would end up with ./public/fonts/roboto . Nothing happens. No warnings/errors nothing. How can I tell if I am doing something wrong?

NEW WEBPACK

Nothing renders or is copied into public/ directory. No errors.

var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');

const path = require('path');

const PATHS = {
  app: path.join(__dirname, './app-client.js'),
  build: path.join(__dirname, './public'),
  fonts: path.join(__dirname, './fonts'),
  cssLoc: path.join(__dirname, './styles'),
  imagesLoc: path.join(__dirname, './images')
};


if(process.env.NODE_ENV === 'development'){
  var loaders = ['react-hot','babel']
} else {
  var loaders = ['babel']
}

module.exports = {
    devServer: {
        inline: true,
        port: 8080,
        outputPath: PATHS.build
    },
    //bundle app from here
    entry: {
      app: PATHS.app
    },
    output: {
      path: PATHS.build,
      filename: 'bundle.js',
      publicPath: PATHS.build
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=stage-1,presets[]=stage-2,presets[]=react,plugins[]=transform-runtime']
            },
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
            },
            {
                test: /\.css$/,
                loader: 'css'
            },
            {
                test: /\.(png|gif|jpe?g|svg)$/i,
                loader: 'url?limit=50000&name=img/[name]' // limit ~50kb
            },
            {
                test: /\.(otf|eot|ttf|woff|woff2)$/,
                loader: 'file?name=assets/fonts/[name].[ext]'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
    },
    node: {
        console: true,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor']
        }),
        new webpack.DefinePlugin({
          'process.env.COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET)
        }),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin(
            {
                template: './public/index.html'
            }
        )
    ]
}

Answer 1

I usually pass all font extensions once, like this:

{
   test: /\.(otf|eot|ttf|woff|woff2)$/,
   loader: 'file?name=assets/fonts/[name].[ext]'
}

All fonts gets copied to my deploy/assets/fonts folder.

Here's my whole webpack.config file:

var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: {
        inline: true,
        port: 3333
    },
    entry: {
        vendor: [
            'bootstrap-loader',
            'angular'
        ],
        'app': './app/app.js'
    },
    output: {
        path: './',
        filename: '[name].js'
    },
    module: {
        loaders: [
            { 
                test: /\.js$/,
                exclude: [path.resolve(__dirname, 'node_modules')],
                loader: 'babel',
                query: {
                  presets: 'es2015',
                }
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
            },
            {
                test: /\.css$/,
                loader: 'css'
            },
            {
                test: /\.(png|gif|jpe?g|svg)$/i,
                loader: 'url?limit=50000' // limit ~50kb
            },
            {
                test: /\.(otf|eot|ttf|woff|woff2)$/,
                loader: 'file?name=assets/fonts/[name].[ext]'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'        
            }
        ]
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.js']
    },
    node: {
        console: true,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor']
        }),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin(
            {
                template: './index.html'
            }
        ),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
}