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

7201 ワード
JavaScript webp-loader webpack WebP imagemin JavaScript テキストリンク

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に変換するというのもできました。
↓がやってみたサンプルです。
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