webp-loader

↑こちらの設定を参考にし、設定してみました。

yarn add -D webpack webpack-cli file-loader webp-loader

webpack.config.js

module.exports = {
    mode: process.env.NODE_ENV || "development",
    entry: {
        a: "./images/a.png",
        b: "./images/b.png",
        c: "./images/c.png",
    },
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[path][name].[ext].webp",
                        },
                    },
                    "webp-loader?{quality: 50}",
                ],
            }
        ]
    },
};

この設定でyarn webpackと実行し、webpackを実行するとdistフォルダ内にwebpが作成されました。
ただ、distフォルダに不要なa.jsなども一緒にできてしまうのでもうちょっといいやりがないかと思いました。

この例では、webpackのentryで直接画像ファイルを指定していますが、jsファイルで
import image01 from "./images/01.png";などと読み込んでもwebpに変換するフローで処理してくれるので、jsファイルで読み込むファイルを全部一気にwebpに変換するというのもできました。
↓がやってみたサンプルです。
https://github.com/okumurakengo/webpack-webp-sample

imagemin-webp

imageminのWebPプラグインでやってみました

ほぼこちらの参考通りですが、試してみるとうまく変換することができました

参考：https://www.smashingmagazine.com/2018/07/converting-images-to-webp/#using-webpack

yarn add -D webpack webpack-cli imagemin-webpack-plugin imagemin-webp copy-webpack-plugin

webpack.config.js

ImageminWebpackPlugin = require("imagemin-webpack-plugin").default;
ImageminWebP = require("imagemin-webp");
CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
    entry: "./src/index.js", // 空のファイルでOK
    plugins: [
        new CopyWebpackPlugin([{
            from: "./src/images/*.png",
            to: "./images/[name].webp"
        }]),
        new ImageminWebpackPlugin({
            plugins: [
                ImageminWebP({
                    quality: 75
                })
            ]
        })
    ]
};

yarn webpack #distフォルダにwebpに変換した画像が作成されている

読んでいただいてありがとうございましたm(_ _)m

Webpackを使って画像をwebpに変換してみた

webp-loader

imagemin-webp