How to save the structure when connecting via import?

Question

webpack

Images are connected to index.js in this way:

import './img/backgrounds/mainsite-bg.jpg';
import './img/icons/sprite.svg';

You can notice that the pictures are imported from different folders, one from backgrounds, and the other from icons. After processing, webpack loads all the pictures into one folder dist / img,
And it is necessary that the pictures are loaded according to the structure that was before processing
.
dist/img/backgrounds
dist/img/icons
Here is the code to process images:

{
    test: /\.(jpe?g|png|gif|svg)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: "img/[name].[ext]"
            }
        }
    ]
},

How can the structure be preserved?

Answer 1

won't that help?

options: {
  name: "[folder]/[name].[ext]"
}