用于压缩 jpg、png 和创建 webp 的 Webpack imagemin 插件? [英] Webpack imagemin plugin to compress jpg, png and create webp?

问题描述

我正在尝试找出如何使用 webpack 以最佳方式压缩我的图像.我正在寻找一种方法来压缩 .jpg(有损)、.png，并为每个 jpg/png 文件创建 .webp 文件.

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.

我尝试了 https://github.com/itgalaxy/imagemin-webpack 这似乎用于输出 .jpg 和 .png 文件，但我无法开始输出 .webp，即使它说它应该支持其他 imagemin 包.

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

但它似乎完全忽略了webp"部分，没有错误或任何东西.有没有更好的方法来使用满足我要求的 webpack 压缩图像?还是我需要以不同的方式执行此操作?

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?

推荐答案

已经有了答案这里不完全一样.

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

我猜你想念的是 imageminWebp 函数.你可以在链接的 repo (webpack.common.js 第 22-26 行).

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

这篇关于用于压缩 jpg、png 和创建 webp 的 Webpack imagemin 插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！