🤳

【Webpack】Squooshで画像を一括圧縮

2022/06/14に公開

webpack

npm

Node.js

tech

はじめに

今までGulpやimageminを使って画像の一括圧縮をしてきましたが、使用するパッケージで依存性/脆弱性の問題があり使用するパッケージの変更を検討していました。
そんな中Googleが提供するSquooshがnpmやWebpackで使えるようになってたので試してみました。

要件

src/imgのフォルダ構成を維持してdist/assets/imgに書き出す
画像の追加時に実行
対象拡張子はpng,jpg

使用ライブラリ

Webpackの設定

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const path = require('path');

const optimizer = {
  mode: "development",
  entry: path.resolve(__dirname, 'src/js/dummy.js'),
  output: {
    clean: true,
    path: path.resolve(__dirname, 'dist/assets/js'),
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname, 'src/img'),
        to: path.resolve(__dirname, 'dist/assets/img')
      }]
    }),
    new ImageMinimizerPlugin({
      test: /\.(png|jpe?g)$/i,
      minimizer: {
        implementation: ImageMinimizerPlugin.squooshMinify,
        options: {
          encodeOptions: {
            mozjpeg: {
              quality: 85,
            },
            oxipng: {
              level: 3,
              interlace: false,
            }
          },
        },
      },
    }),
  ]
}

module.exports = [
  optimizer
];

補足

dummy.jsを用意することでひとまずentryを通す。（中身は空でOK）
module.exportsで分けてるのは、他にも走らせるmoduleがあるからです💦（他にない場合はそのままmodule.exports = {}で書いて大丈夫です）

package.jsonで実行

watchさせたかったので、画像ファイルが追加されたら実行されるようにしました。

package.json

"compile:img": "webpack",
"watch:img": "onchange src/img/**/*.{jpg,png,gif,svg} -- webpack",

watchではjpgとpng以外も指定していますが、圧縮はされません。複製のみです。
（Squooshの対象外でした...残念😭）

はじめに

要件

使用ライブラリ

Webpackの設定

補足

package.jsonで実行

Discussion