webpackでディレクトリ構造そのままに画像圧縮を行いたい

TL;DR

完成したものはこちら
https://github.com/shota-co/blog-sample-code/blob/master/webpack-images/webpack.config.js
画像圧縮はこちらを利用
https://www.npmjs.com/package/imagemin-webpack-plugin
ディレクトリ構造ごとコピーするのはこちらを利用
https://github.com/webpack-contrib/copy-webpack-plugin

背景

webサイト制作する中、どーしてもサイズが大きい画像が出てくる。

圧縮サービスを毎回使うのもめんどくさい。

圧縮するけどディレクトリ構造ぐちゃぐちゃになっちゃう。などがありました。

参考:https://liginc.co.jp/412075

使えそうなもの、設定が簡単そうなものがなかなか見つからず。

調べている道中parcelもいいかもと思ったのですが

結局下のqiitaにもあるように複雑なことや大規模になってくると難しい部分もあり自由度が効かない部分があったので、

今回やはりwebpackでやってみました。

https://qiita.com/soarflat/items/3e43368b2d767c730781

https://parceljs.org/

何を実現しているのか

  1. 画像ファイルの圧縮(jpg|png|gif|svg)に対応させる
  2. ディレクトリ構造をそのままに吐き出す

どうやっているのか

  1. ファイルのコピーにはcopy webpack pluginを利用。単純にfromとtoだけ指定する。
        new CopyWebpackPlugin([{
          from: './src/assets',
          to: 'assets'
        }]),
  2. 圧縮にはimagemin-webpack-pluginを利用する。またファイル圧縮のために4つほどプラグインを追加。それらはimagemin-webpack-plugin内のreadmeにこのページで探すように書いてあったものに従いました
        new ImageminPlugin({
          test: /\.(jpe?g|png|gif|svg)$/i,
          plugins: [
            ImageminMozjpeg({ quality: 80 }),
            ImageminPngquant({ quality: '65-80' }),
            ImageminGifsicle(),
            ImageminSvgo()
          ]
        });

以上です