Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

webp-loaderとimagemin-webpをそれぞれ使ってみました

webpack初心者です。間違っていたら教えていただけるとありがたいです。:bow:

webp-loader

https://github.com/kavu/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

okumurakengo
人が作ってくれたご飯食べるときに何も言わずに食べるのは、ちょっとダメらしいという話を聞いたことがあるので、「あ、うめ、あ、うめ」って言いながら食ってたら、すごい変な人と思われてしまってしまった/初心者です、あまりわかっていません
https://bokete.jp/user/okumurakengo
qiitadon
Qiitadon(β)から生まれた Qiita ユーザー・コミュニティです。
https://qiitadon.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away