Изображения с imagemin-webpack, copy-webpack-plugin, url-loader и responsive-loader

Я хотел поддерживать оба минимизированных изображения в их существующем формате (png, jpg) и т. д., а также создавать веб-версии этих изображений. Цель была

  1. Поддержка url-loader, responsive-loader, imagemin-webpack и copywebpackplugin.
  2. Поддержка веб-изображений (минимизированных) с адаптивным загрузчиком в браузерах, которые их поддерживают.
  3. Поддержка адаптивных изображений (минимизированных) в браузерах без webp, но поддерживающих srcset.F
  4. Возврат к исходному формату (свернутому) в браузере, который не поддерживает указанные выше сценарии.

Конфигурация

Были некоторые проблемы с конфигурацией для достижения цели, но после настройки мне удалось ее достичь. Вот мой процесс (может быть, это не самый правильный/элегантный способ сделать это)

  1. Я сделал копию моего каталога images как каталог webp-images.
  2. Добавлен один экземпляр для плагина imagemin-webpack с отключенным загрузчиком для всех изображений, кроме изображений в каталоге webp-images. Для этого я использовал свойство exclude в формате массива с регулярным выражением. Мне не удалось заставить работать exclude без регулярного выражения (похоже, он работал с copywebpackplugin, но не работал правильно для всех сценариев) с загрузчиком.
  3. Добавлен один экземпляр для плагина imagemin-webpack с отключенным загрузчиком для всех изображений в каталоге webp-images. Для этого я использовал свойство include в формате массива с регулярным выражением. Мне не удалось включить работу без регулярного выражения (похоже, это работало с copywebpackplugin, но не работало правильно для всех сценариев) с загрузчиком.
  4. Добавлен 1 загрузчик с поддержкой url-loader (возврат к адаптивному загрузчику), за которым следует imagemin-webpack загрузчик для всех изображений, кроме изображений в webp-images. Для этого я использовал exclude с нерегулярным выражением (здесь вариант без регулярного выражения, похоже, работал в соответствии с моими ожиданиями)
  5. Добавлен еще один загрузчик с поддержкой url-loader (откат к адаптивному загрузчику), за которым следует imagemin-webpack загрузчик для всех изображений в webp-images. Для этого я использовал include с нерегулярным выражением (здесь вариант без регулярного выражения, похоже, работал в соответствии с моими ожиданиями).

Это позволило иметь веб-изображения и изображения в исходном формате, проходящие через copywebpackplugin, responsive-loader, url-loader, imagemin-webpack.

Наблюдения

  1. Вместо этого я добавил два автономных загрузчика. С включенным загрузчиком мне не удалось правильно вывести два отдельных вывода: один для webp, а другой для другого. Казалось, что ко всем изображениям, даже к изображениям из images, применяется только последний плагин (версия webp).
  2. Я обнаружил странное поведение с заполнителем [path] для imagemin-webpack. В машине на базе Windows кажется, что первый символ каталога пропускается, например. если бы изображение было в каталоге изображений, оно вывело бы их в magesdir вместо images. Чтобы исправить это, я добавил /[path] вместо [path].