有人可以引导我逐步了解如何在我的React应用（firebase）中使用imagemin-webp吗？

Question

我想将所有图像都转换为webp，但是我不知道如何（对noob编程）。我构建了一个React应用，我有一个firebase.json，我的package.json中有脚本“ build”：“ react-app-rewired build”。

我将代码放在哪里以及如何连接它们？预先感谢。

Answer 1

如果您熟悉nodejs，则可以使用imagemin-webp
https://www.npmjs.com/package/imagemin-webp

npm i imagemin
npm i imagemin-webp

，然后使用以下脚本：

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*.{jpg,png}'], { //input here
  destination: __dirname + '/images/converted/', //output here
  plugins: [
    imageminWebp({
      quality: 75, //quality
      resize: { //optional resizing
        width: 1000, 
        height: 0 //if one of the parameters is 0 it scales automatically 
      }
    })
  ]
}).then(() => {
  console.log('Images optimized');
});