Как сохранить структуру при подключении через import?

Question

[uzi_no_uzi]

К index.js таким образом подключаются картинки:

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

Можно заметить, что картинки импортируются из разных папок, одна из backgrounds, а другая из icons. После обработки webpack грузит все картинки в одну папку dist/img,

А надо чтобы грузил картинки по структуре, которая была до обработки

Т.е.

dist/img/backgrounds
dist/img/icons

Вот такой код обрабатывает картинки:

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

Как можно сохранить структуру?

Answer 1

[ⓒⓢⓢ]

такое не поможет?

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

Comments

[uzi_no_uzi]

Когда так делаю, то в папке dist образуется папка src, там img и только там раскладываются

Т.е. вот так выходит dist/src/img/icons например

[ⓒⓢⓢ]

а webpack.context \ webpack.entry у вас куда указывает?

попробуйте или это:
вместо [path] => [folder]
или это:
useRelativePath: true

[uzi_no_uzi]

JRK_DV,

Это ответ на первый вопрос :)

Попробовал опа варианта, в первом случаи сохраняется в таком виде: iconsтут_название_картинки, т.е. название папки идет в само название картинки

а во втором просто ничего не меняется.

[ⓒⓢⓢ]

да это я не учёл, - попробуйте разделить папку и название слешем? =)
name: "[folder]/[name].[ext]"

[uzi_no_uzi]

JRK_DV, Отредактируйте ответ :)