问题标签 [imagemin-webp]

我正在配置imagemin-webp-webpack-plugin以将我的所有 .png 和 .jpg 图像转换src/assets/images为dist/assets/images. 当我运行构建命令时，转换成功。所有图像都已转换为 webp 并分发到dist/assets/images. 我认为“这很简单”，是时候<picture>在我的文件中创建标签src/index.html以开始引用 .webp 图像了：

src/index.html：

当我npm run build再次，这次我得到：

这对我来说很有意义。这些图像不存在，src/assets/images/因此 Webpack 无法解决这些问题。

src/index.html所以现在我遇到了一个障碍：当这些图像仅dist/whateverpath在 jpg 和 png 被imagemin-webp-webpack-plugin处理后才存在时，如何在我的文件中引用 .webp 图像？

这是我的配置文件，以防万一它有用：

webpack.config.js

这是我的配置

现在我想添加规则

清单.json

如何配置 webpack 以使 webp 图像最终位于原始图像旁边？此规则仅适用于原始图像，但 webp 图像将保留 'assets/' 前缀。

当然我可以删除文件名功能，但我不希望它们最终出现在资产中。由于遗留代码，我需要他们结束一个文件夹。

我在一个网站上找到了一个将 png、jpg 转换为 webp 的代码，但它对我不起作用。我在 /images/ 文件夹中有两个 jpg 文件

当我运行 node index.js 时，我会收到您在照片中看到的消息

我有一个将图像转换为节点的脚本，但是在收到成功消息时遇到问题，但没有输出任何内容。

我在跑步

• 节点 v14.16.0
• imagemin v8
• imagemin-webp v6

我也尝试使用相对文件夹路径无济于事。这是在 Windows 10 上。

动态加载的内容具有图像资源（来自动态目录）。安装“image-minimizer-webpack-plugin”以优化静态文件夹中的图像。希望优化动态加载的图像以提高站点性能。

优化选项：在不降低图像质量的情况下减小图像尺寸。或在页面加载时加载占位符图像，并在用户滚动到图像位置时呈现实际图像。