用于压缩 jpg、png 和创建 webp 的 Webpack imagemin 插件？答案

【问题标题】：Webpack imagemin plugin to compress jpg, png and create webp?用于压缩 jpg、png 和创建 webp 的 Webpack imagemin 插件？
【发布时间】：2020-01-02 02:50:24
【问题描述】：

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

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

我目前对该插件的配置是：

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

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

【问题讨论】：

标签： javascript npm webpack image-compression webp

【解决方案1】：

here 已经有了答案，尽管问题并不完全相同。

我猜你想念的是imageminWebp 函数。您可以在链接的 repo (webpack.common.js lines 22-26) 中查看它。

【讨论】：

好的 - 但那是使用与插件不同的设置。
@nickelman 确实如此。然而，imagemin 本身不会将您的文件转换成任何东西。它优化已经存在的图像。因此，如果您已经有 webp 图像，那么您的设置应该可以工作。如果你想生成它们，那么，你需要除了 imagemin 之外的东西。我猜你可能会同时使用 imagemin-webp 和 imagemin 作为插件。我使用另一个优化插件只是因为我喜欢它。