Webpack(Encore):使用图像Webpack加载程序将图像转换为webp

Question

我正在尝试使用webpack Encore中的图像webpack加载程序插件将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

为时已晚，但只适用于未来的谷歌用户：

看起来图像webpackloader中的信息有点误导。它可以做的是优化已经存在的webp文件以减小其大小。

虽然前面的陈述可能是真是假，但我还没有弄清楚如何使用这个加载器将图像转换为webp。

相反，我使用imagemin-web生成webps&然后将其导入到一个文件中，通过image-webpackloader&文件加载程序。

所以，最终的结果是：

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以及所有其他文件。