Webpack(Encore):使用image-webpack-loader将图像转换为webp [英] Webpack (Encore): convert images to webp using image-webpack-loader
问题描述
我正在尝试使用图像将我的jpeg
图像转换为webp
格式Webpack Encore中的-webpack-loader 插件.以下配置成功缩小了我的文件,但未将它们转换为webp
图像.
I am trying to convert my jpeg
images to the webp
format using the image-webpack-loader plugin in Webpack Encore. The following config successfully minifies my files but does not convert them to webp
images.
webpack.config.js
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
实现我想要的?还是我应该与另一个插件一起使用?
How can I achieve what I want using the plugin image-webpack-loader
? Or is there another plugin I should use alongside this one?
推荐答案
为时已晚,但仅适用于未来的Google员工:
Too late to be true, but just for future googlers:
image-webpack-loader中的信息似乎具有误导性.它可以做的是优化现有的webp文件以减小其大小.
It looks like info in image-webpack-loader is kind of misleading. What it can do is optimize already existing webp file to reduce its size.
尽管前面的陈述可能是正确的,但我还没有弄清楚如何使用此加载程序将图像转换为webp.
While previous statement might be true or not, I haven't figured out how to convert images to webp with this loader.
相反,我使用imagemin-webp生成了webps&然后将其导入到文件中,并通过image-webpack-loader&文件加载器.
Instead I used imagemin-webp to generate webps & then just imported it into a file passing it through 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>
);
};
这段代码是设置的一部分,我用它来启动已经配置好的新项目.
This code is a part of the set-up that I use to start new projects with config already in place.
因此,如果您有兴趣,可以找到完整的webpack.js以及所有其他文件
So, if you're interested, you may find complete webpack.js as well as all other files here.
这篇关于Webpack(Encore):使用image-webpack-loader将图像转换为webp的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!