Webpack (Encore): конвертировать изображения в webp, используя image-webpack-loader - PullRequest
Новая
       7

Webpack (Encore): конвертировать изображения в webp, используя image-webpack-loader

0 голосов
/ 26 ноября 2018

Я пытаюсь преобразовать мои jpeg изображения в формат webp с помощью плагина image-webpack-loader в Webpack Encore.Следующая конфигурация успешно минимизирует мои файлы, но не преобразует их в webp изображений.

webpack.config.js

test: /\.(gif|png|jpe?g|svg)$/i,
loader: 'image-webpack-loader',
options: {
   disable: true, //bypassOnDebug
   convertPathData: false,
   mozjpeg: { //works
      progressive: true,
      quality: '80-90'
    },
   webp: { //doesn't convert my images to webp
      quality: 75,
      enabled: true
   }
 }

Как мне добиться того, чего я хочу, используяплагин image-webpack-loader?Или есть другой плагин, который я должен использовать вместе с этим?

1 Ответ

0 голосов
/ 21 апреля 2019

Слишком поздно, чтобы быть правдой, но только для будущих гуглеров:

Похоже, информация в image-webpack-loader вводит в заблуждение.Он может оптимизировать уже существующий файл webp, чтобы уменьшить его размер.

Хотя предыдущее утверждение может быть верным или нет, я не выяснил, как преобразовать изображения в webp с помощью этого загрузчика.

Вместо этого я использовал imagemin-webp для генерации webps, а затем просто импортировал его в файл, передавая его через image-webpack-loader & file-loader.

Итак, конечный результат был похож на: 

import React from "react";
import waveImgJpg from "Images/common/wave.jpg";
import waveImgWebP from "Images/webp/wave.webp";
import styles from "IndexStyles/mainContent.scss";

export const MainContent = () => {
    return (
        <picture>
            <source className={styles.waveImg} srcSet={waveImgWebP} type="image/webp" />
            <img className={styles.waveImg} src={waveImgJpg} alt="beatiful wave" title="beatiful wave" />
        </picture>
    );
};

Этот код является частью настройки, которую я использую для запуска новых проектов с уже установленным конфигом.

Так что, если вам интересно, вы можете найти полный webpack.js кака также все остальные файлы здесь .

...