Webpack imagemin plugin to compress jpg, png and create webp?

Question

I'm trying to figure out how to compress my images the best way using webpack. I'm looking for a way to compress .jpg (lossy), .png, and also create .webp files for each jpg/png file.

I tried https://github.com/itgalaxy/imagemin-webpack which seems to be working for outputting .jpg and .png files, but I cannot get to work to output .webp even if it say it should support other imagemin-packages.

My current config for this plugin is:

const imageMinPlugin = new ImageminPlugin({
    imageminOptions: {
        plugins: [
            ['webp', { quality: 50 }],
            ['mozjpeg', { quality: 10 }],
            ['pngquant', { quality: [0.9, 0.95]}],
        ]
    }
});

But it seems to completely ignore the "webp" part, no errors or anything. Is there a better way to compress images using webpack that fullfills my requirements? Or do I need to do this in a different way?

Tensiometer

Answer 1

There's already an answer here though the question wasn't precisely the same.

I guess what you miss is imageminWebp function. You may check it out in linked repo (webpack.common.js lines 22-26).

Suspiration

Okay - but that is then using a different setup than as a plugin. – Tensiometer

@Tensiometer It is indeed. Yet, imagemin itself doesn't convert your files into anything. It optimizes already existing images. So if you already have webp images, your setup should work. In case you want to generate them, then, well, you need something apart from imagemin. I guess you might use imagemin-webp & imagemin as plugin in the same time. I use another optimization plugin just because I preferred it. – Suspiration