webp-loader와 imagemin-webp를 각각 사용해 보았습니다.

webpack 초보자입니다. 잘못되면 알려 주시면 감사하겠습니다.

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로 변환한다고 하는 것도 할 수 있었습니다.
↓가 해본 샘플입니다.
htps : // 기주 b. 코 m / 오쿠무라 켄고 / ぇ b 빠 쿠 우 ぇ b p ㅇ ぇ

imagemin-webp

imagemin의 WebP 플러그인으로 시도했습니다.

거의 이쪽의 참고대로입니다만, 시험해 보면(자) 잘 변환할 수 있었습니다

참고 : htps //w w. s 마신 g 마지 네. 코 m / 2018 / 07 / 안녕 r 찐 g 낫게 s - ぇ bp / # ushin gh ぇ b Pack

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