Изображения с imagemin-webpack, copy-webpack-plugin, url-loader и responsive-loader
Я хотел поддерживать оба минимизированных изображения в их существующем формате (png, jpg) и т. д., а также создавать веб-версии этих изображений. Цель была
- Поддержка url-loader, responsive-loader, imagemin-webpack и copywebpackplugin.
- Поддержка веб-изображений (минимизированных) с адаптивным загрузчиком в браузерах, которые их поддерживают.
- Поддержка адаптивных изображений (минимизированных) в браузерах без webp, но поддерживающих srcset.F
- Возврат к исходному формату (свернутому) в браузере, который не поддерживает указанные выше сценарии.
Конфигурация
Были некоторые проблемы с конфигурацией для достижения цели, но после настройки мне удалось ее достичь. Вот мой процесс (может быть, это не самый правильный/элегантный способ сделать это)
- Я сделал копию моего каталога
images
как каталогwebp-images
. - Добавлен один экземпляр для плагина
imagemin-webpack
с отключенным загрузчиком для всех изображений, кроме изображений в каталогеwebp-images
. Для этого я использовал свойствоexclude
в формате массива с регулярным выражением. Мне не удалось заставить работать exclude без регулярного выражения (похоже, он работал с copywebpackplugin, но не работал правильно для всех сценариев) с загрузчиком. - Добавлен один экземпляр для плагина
imagemin-webpack
с отключенным загрузчиком для всех изображений в каталогеwebp-images
. Для этого я использовал свойствоinclude
в формате массива с регулярным выражением. Мне не удалось включить работу без регулярного выражения (похоже, это работало с copywebpackplugin, но не работало правильно для всех сценариев) с загрузчиком. - Добавлен 1 загрузчик с поддержкой url-loader (возврат к адаптивному загрузчику), за которым следует
imagemin-webpack
загрузчик для всех изображений, кроме изображений вwebp-images
. Для этого я использовал exclude с нерегулярным выражением (здесь вариант без регулярного выражения, похоже, работал в соответствии с моими ожиданиями) - Добавлен еще один загрузчик с поддержкой url-loader (откат к адаптивному загрузчику), за которым следует
imagemin-webpack
загрузчик для всех изображений вwebp-images
. Для этого я использовал include с нерегулярным выражением (здесь вариант без регулярного выражения, похоже, работал в соответствии с моими ожиданиями).
Это позволило иметь веб-изображения и изображения в исходном формате, проходящие через copywebpackplugin, responsive-loader, url-loader, imagemin-webpack.
Наблюдения
- Вместо этого я добавил два автономных загрузчика. С включенным загрузчиком мне не удалось правильно вывести два отдельных вывода: один для webp, а другой для другого. Казалось, что ко всем изображениям, даже к изображениям из
images
, применяется только последний плагин (версия webp). - Я обнаружил странное поведение с заполнителем
[path]
дляimagemin-webpack
. В машине на базе Windows кажется, что первый символ каталога пропускается, например. если бы изображение было в каталоге изображений, оно вывело бы их вmages
dir вместоimages
. Чтобы исправить это, я добавил/[path]
вместо[path]
.