Configure webpack to output images/fonts in a separate subfolders

{ 
    test: /\.(ttf|eot|svg|woff2?)(\?v=[a-z0-9=\.]+)?$/i,
    include: folders.npm,
    loader: 'file?name=fonts/[name].[ext]'
},
{
    test: /\.(jpe?g|png|gif|svg|ico)$/i,
    include: folders.src,
    loaders: [
        'file?name=images/[sha512:hash:base64:7].[ext]',
        'image-webpack?progressive=true&optimizationLevel=7&interlaced=true'
    ]
}

This is what I use in production. I often come across situation where *.svg pictures are used and SVG fonts for IE fallback. Here I assume font are always inside node_modules. I have also seen devs doing test: /fonts\/[w+].(svg|eot ....).

I could figure this out by referring to url-loader & file-loader documentation on GitHub.

All, I needed to do was to add a name query-string parameter in loader to specify full path. I also learned that you can specify how files should be named in output location.

{
    test: /\.(jpg|jpeg|gif|png)$/,
    exclude: /node_modules/,
    loader:'url-loader?limit=1024&name=images/[name].[ext]'
},
{
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    exclude: /node_modules/,
    loader: 'url-loader?limit=1024&name=fonts/[name].[ext]'
}