How to save the structure when connecting via import?

To index.js thus connecting pictures:

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


You may notice that images are imported from various folders, one of backgrounds, and another of icons. After treatment webpack loads all the images in one folder dist/img

And it is necessary to shipped the pictures on the structure, which was prior to the treatment

Ie

dist/img/backgrounds
dist/img/icons

This code handles pictures:

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


How can we preserve the structure?
March 19th 20 at 08:25
1 answer
March 19th 20 at 08:27
Solution
this will not help?
options: {
 name: "[folder]/[name].[ext]"
}
When you do that, the dist folder is formed in the src folder, where the img and just laid out there

Ie, so it goes dist/src/img/icons for example - Zachariah98 commented on March 19th 20 at 08:30
and webpack.context \ webpack.entry you pointed?

or try this:
instead of [path] => [folder]
or this:
useRelativePath: true - Shyanne_Hya commented on March 19th 20 at 08:33
@Shyanne_Hya, 5c9887085e684936295218.jpeg

This is the answer to the first question :)

Tried OPA variant, in the first case is retained in this form: sopotzkinski, i.e. the folder name is the name of the picture

and the second just nothing changes. - Zachariah98 commented on March 19th 20 at 08:36
Yes it is, I did not consider, try to share a folder and the name of slash? =)
name: "[folder]/[name].[ext]" - Shyanne_Hya commented on March 19th 20 at 08:39
@Shyanne_Hya, Edit the answer :) - Zachariah98 commented on March 19th 20 at 08:42

Find more questions by tags Webpack