Webpack4: как работать с изображениями в подпапках

Мои изображения разделены в разные подпапки в каталоге src / images. Когда я запускаю создание сборки с помощью webpack, все изображения копируются в одну папку img, а изображения с одинаковым именем просто заменяют друг друга. Это моя конфигурация webpack для изображений:

 {
     test: /\.(png|jpe?g)/i,
     use: [
        {
           loader: "url-loader",
           options: {
              name: "img/[name].[ext]",
              limit: 10000
            }
         },
         {
            loader: "img-loader",
            options: {
                name: "img/[path]/[name].[ext]",
                useRelativePath: true
            }
         }
     ]
 }

Не могли бы вы подсказать, как настроить webpack для разделения изображений с использованием той же структуры папок, что и в src / images. Я новичок в webpack. Спасибо


Итак, вот окончательный ответ, который мне подходит:

{
                    test: /\.(png|jpe?g)/i,
                    use: [
                        {
                            loader: "url-loader",
                            options: {
                                name: "img/[path][name].[ext]",
                                context: "src/assets/images",
                                limit: 10000
                            }
                        },
                        {
                            loader: "img-loader",
                            options: {
                                name: "img/[path][name].[ext]",
                                context: "src/assets/images"
                            }
                        }
                    ]
                }
1
0
960
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В коде вы просите Webpack обрабатывать файлы изображений с помощью:

loader: "url-loader",
options: {
    name: "img/[name].[ext]",
    limit: 10000
}

что означает размещение всех файлов в формате img/[name].[ext] (который помещает все файлы в один каталог img), где, если вы хотите использовать "img/[path]/[name].[ext]", чтобы иметь возможность поддерживать структуру пути исходных файлов.

Итак, измените свой блок кода на это:

{
test: /\.(png|jpe?g)/i,
use: [
    {
        loader: "url-loader",
        options: {
            name: "img/[path]/[name].[ext]",
            limit: 10000
        }
    },
    {
        loader: "img-loader",
        options: {
            name: "img/[path]/[name].[ext]",
            useRelativePath: true
        }
    }
  ]
}

При желании, если в структуре каталогов слишком много уровней, вы можете использовать что-то вроде:

options: {
    name: "img/[path]/[name].[ext]",
    context: "src" // or whatever common directories above actual images
}

Я действительно пытался использовать [путь], но он принимает полный путь, поэтому файлы помещаются в img/src/assets/images/subfolder, а не только в img/subfolder.

Anna 31.10.2018 16:14

@Anna да, это то, что он должен делать изначально. Вы можете попробовать context: 'src/assets' в разделе опций, чтобы сконструировать его так, как вы ищете.

Arpit Goyal 31.10.2018 16:19

@Anna также обновила мой ответ соответственно, пожалуйста, проголосуйте и примите ответ, если это поможет.

Arpit Goyal 31.10.2018 16:27

Рад помочь :)

Arpit Goyal 31.10.2018 16:40

Другие вопросы по теме