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

1 个答案: