我正在尝试使用Webpack Encore中的jpeg
插件将我的webp
图像转换为image-webpack-loaderformat。以下配置成功缩小了我的文件,但未将它们转换为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
实现我想要的效果?或者我应该使用另一个插件吗?
为时尚未成熟,但仅限于未来的googlers:
看起来像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。