Webpack (Encore): convert images to webp using image-webpack-loader

Question

I am trying to convert my jpeg images to the webpformat using the image-webpack-loader plugin in Webpack Encore. The following config successfully

Answer 1

Too late to be true, but just for future googlers:

It looks like info in image-webpack-loader is kind of misleading. What it can do is optimize already existing webp file to reduce its size.

While previous statement might be true or not, I haven't figured out how to convert images to webp with this loader.

Instead I used imagemin-webp to generate webps & then just imported it into a file passing it through image-webpack-loader & file-loader.

So, the final result was like:

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>
    );
};

This code is a part of the set-up that I use to start new projects with config already in place.

So, if you're interested, you may find complete webpack.js as well as all other files here.