How to organize files into folders when building webpack 5?

Question

webpack

in the output folder /distit turns out index.bundle.js, index.cssand index.html, and all files get into the same folder after assembling fonts, pictures, and so on.
Is it possible to somehow specify in webpack that he would throw all these pictures, fonts, etc. into a folder, for example , /dist/assetsor pictures into pictures, fonts into fonts, for example /dist/images, /dist/fontswithout the help of fs, of course.

Answer 1

In webpack config:

output: {
  path: path.resolve(__dirname, './build'),
  filename: 'static/js/[name].[contenthash].js',
  crossOriginLoading: 'anonymous'
};

And in plugins:

new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash].css', ignoreOrder: false }),