Начинаю только изучать React, встал вопрос как добавить автоматическую конвертацию .jpg.png картинок в .webp, (приложение создал утилитой create-react-app).
Поясняю: до этого на gulp сборке у меня был плагин gulp-webp и там был таск на автоматическую конвертацию картинок в .webp, то есть как только в проект прилетает новая картинка она сразу же конвертируется в .webp слушателем watching, и в браузере я уже мог наблюдать как вставилась картинка формата .webp. Как точно также сделать в реакт приложении? Нужно ли для этого добавлять gulp в react если тут уже вроде как есть webpack или существуют какие то другие способы этой реализации?
1. Gulp точно не нужен. Мне прям вспомнился 2016 - тогда еще были сборки реакта галпом...
2. В составе create-react-app используется webpack. Нужно просто расширить конфиг с помощью craco.
Вот тутор , который сам для себя проверял на работоспособность: How to Optimize Images for Usage in Websites
Да! В статье как раз прилагается код для оптимизации и конвертации изображений, добавил этот код в craco.config.js, и действительно функционал вебпака расширился, теперь у меня автоматически появляются .webp изображения сразу в браузере, а где не поддерживается то будут стандартные .jpg/.png, статья полностью рабочая и очень полезная! благодарю!
Простой
