How to put pictures and fonts in separate folders in webpack 5 and work with them?

Question

webpack

In webpack 5.6.0, images and fonts automatically go to the root of the project and the structure is mushy.

Previously, you could use the file-loader and do this:

{
        test: /\.(?:|gif|png|jpg|jpeg|svg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: `./img/${filename('[ext]')}`
          }
        }],
      },

It still transfers everything normally, however, pictures, for example, are also transferred to the root and are no longer displayed on the site. How to do it right now so that pictures and fonts are in folders and everything works? I read the doc , but did not find examples with folders there

Answer 1

https://webpack.js.org/guides/asset-modules/#custo...

Answer 2

Webpack 5 uses Asset Modules instead of the usual raw-loader, file-loader, url-loader. To return the behavior of the 4th version and use loaders, you can specify type: 'javascript/auto' in the rule.
More information at the link
I use the following config with asset modules to decompose images and fonts into different folders using generator:

module: {
    rules: [
     ....
      {
        test: /\.(woff|woff2|ttf|otf|eot)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name][ext]'
        } 
      },
      {
        test: /\.(jpe?g|png|gif|svg|ico)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[name][ext]'
        } 
      }
     ....
    ],
  },