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

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

0 голосов
/ 31 октября 2018

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

 {
     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
            }
         }
     ]
 }

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

Итак, вот окончательный ответ, который работает для меня: 

{
                    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 голосов
/ 31 октября 2018

То, что вы в коде, просит 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
}
...