webpack - Webpack (Encore):使用 image-webpack-loader 将图像转换为 webp
问题描述
我正在尝试使用 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
?或者我应该在这个插件旁边使用另一个插件吗?
解决方案
为时已晚,但仅适用于未来的谷歌员工:
看起来 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 以及所有其他文件。
推荐阅读
- node.js - 摩卡,超时后转到下一个文件
- javascript - LocalStorage 变量自动消失
- excel - VBA 或函数将 2x CSV 文件连接到 1x XLSX
- javascript - 如何将字符串转换为布尔表达式?
- amazon-dynamodb - 如何使用 aws cli 仅获取 dynamoDB 中的主键值列表?
- java - 如何使用 JPA 或 Hibernate @JoinTable 与额外的连接条件,如 SQL => from a join b on a.no = b.no 或 b.no 为 null
- c - 是 char str1[] = {'s','t','r','i','n','g','\0'} 从常量内存段复制到堆栈,如 char str2[] = "细绳”?
- c# - C++ & C# 调用 CryptEncrypt 和 CryptDecrypt
- visual-studio - VisualStudio 图标上的绿条是什么意思?
- git - vsDiffMerge 未作为 Sourcetree 外部合并工具运行