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?

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).