Webpack favicons into different folder - webpack-3

Question

I have two folders src/images/ and src/images/icons.
All favicons are in png format.
In src/images/icons I put all the favicons for different devices, which I want to be webpacked to wwwroot/images/icons and all other images to wwwroot/images.
How can I separate images and favicons?
Now for images I have:
{
test: /\.(png|ico|svg|jpg|gif)$/,
use: [
'file-loader?name=/images/[name].[ext]'
]
},
But this would copy all images to dist\images, including the icons, which should be one level deeper in folder dist\images\icons

Answer 1

There are several ways to do this (i.e. use test key against filename, separate rules, etc). However, here is one way that seems to work well and is fairly clear:
const path = require('path')
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|ico|svg|jpg|gif)$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
options: {
name: function(fullPath) {
return path.relative(__dirname + '/src', fullPath)
}
}
}
}
]
}
// ...
}