Suppose I had the following webpack.config.js file:

module.exports = {

    //...

    output: {

        filename: "[name].bundle.js",

        path: path.resolve(__dirname, "dist"),

        assetModuleFilename: "assets/[name][ext]",

    },

    module: {

        rules: [

            {

                test: /.(woff|woff2|eot|ttf|otf)$/i,

                type: "asset/resource",

            },

            {

                test: /.(png|svg|jpg|jpeg|gif)$/i,

                type: 'asset/resource',

            },

        ],

    },

    plugins: [

    //...

    ],

};

My question is how can I separate the fonts from the images? I want to put each one in a subdirectory called "fonts" and "images" under the assets folder. I know this is possible using the "file-loader". However, I want to use the asset module.