Webpack (Encore)：使用 image-webpack-loader 将图像转换为 webp

Question

我正在尝试使用 Webpack Encore 中的 image-webpack-loader 插件将我的 jpeg 图像转换为 webp 格式。以下配置成功缩小了我的文件，但没有将它们转换为 webp 图像。

webpack.config.js

test: /\.(gif|png|jpe?g|svg)$/i,
loader: 'image-webpack-loader',
options: {
   disable: true, //bypassOnDebug
   convertPathData: false,
   mozjpeg: { //works
      progressive: true,
      quality: '80-90'
    },
   webp: { //doesn't convert my images to webp
      quality: 75,
      enabled: true
   }
 }

如何使用插件 image-webpack-loader 实现我想要的功能？或者还有其他插件我应该与这个插件一起使用吗？

Answer 1

为时已晚，但仅供未来的 Google 员工参考：

image-webpack-loader 中的信息看起来有点误导。它可以做的是优化现有的 webp 文件以减小其大小。

虽然之前的说法可能是对的，但我还没有想出如何使用这个加载器将图像转换为 webp。

相反，我使用 imagemin-webp 生成 webps，然后将其导入到一个文件中，通过 image-webpack-loader 和 file-loader 传递它。

因此，最终结果如下：

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

此代码是我用来启动新项目的设置的一部分，并且配置已经到位。

因此，如果您有兴趣，您可能会找到完整的 webpack.js 以及所有其他文件 here。

Webpack (Encore)：使用 image-webpack-loader 将图像转换为 webp

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

webpack

webp

webpack-encore