引き続き今回もGulpからwebpackを使ったフロントエンドの開発環境移行に関する内容です。過去記事「Gulpでいろんなフォーマットの画像を一括で圧縮する」でも紹介していましたが、画像の圧縮も制作をする上では欠かせないタスクになっています。今回はwebpackで各種画像データの圧縮を一括で自動化できるようにしていきます。   webpackで画像圧縮を行うにはTypeScriptやJavaScriptをバンドルする作業が必要になります。過去記事ではwebpackでTypeScriptのコンパイルやBabelを使ったJavaScriptのトランスパイルに関する記事をまとめており、今回はそれを準備している前提で進めていますので、下記のリンクからご参考ください。 【参考記事】 webpackでTypeScriptの自動コンパイル環境を作成してみる webpackでBabelを使ったJavaScriptトランスパイルの環境構築   それではまず必要なパッケージをインストールしていきます。下記のようにコマンドを実行していきます。ここではwebpackでの画像圧縮に必要となる「imagemin-webpack-plugin」と、各画像のフォーマットに合わせて「imagemin-pngquant」「imagemin-mozjpeg」「imagemin-gifsicle」「imagemin-svgo」と揃えます。そして圧縮するために画像ファイルのコピーが必要となるので「copy-webpack-plugin」もインストールしていきます。

$ npm install --save-dev copy-webpack-plugin imagemin-webpack-plugin imagemin-pngquant imagemin-mozjpeg imagemin-gifsicle imagemin-svgo

  インストールが完了するとpackage.jsonにパッケージが追加されているのが確認できます。これで準備は完了ですので、引き続きwebpackの設定を行なっていきます。 【package.json】

{
  .......
  "devDependencies": {
    .......
    "copy-webpack-plugin": "^8.1.1",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.2",
    "imagemin-svgo": "^9.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    .......
  },
  .......
}

  今回のディレクトリ構造は下記にようなものを想定しています。srcディレクトリには圧縮の対象となる画像ファイルを格納し、distファイルにコピーしてから、そのコピーした画像ファイルを圧縮していくという流れになります。watchオプションで実行すると、srcディレクトリ配下に画像ファイルを格納したりすることでディレクトリ内の変更を検知し、画像圧縮の処理が走る形になります。

node_modules
dist
┣（main.js）
┗ img
  ┣（sample_min.jpg）
  ┣（sample_min.png）
  ┣（sample_min.gif）
  ┗（sample_min.svg）
src
┗ main.ts
┗ img
  ┣（sample.jpg）
  ┣（sample.png）
  ┣（sample.gif）
  ┗（sample.svg）
webpack.config.js
tsconfig.json

  それではwebpackの設定を行なっていきます。まずは必要なパッケージをそれぞれ読み込んでおきます。今回もローダーの設定は不要ですが、pluginsの設定を下記のように追加していきます。先述の通り、srcディレクトリに含まれる画像データをdistディレクトリへコピーし、そのあとに画像圧縮の処理を加えていきます。コピー用のplugins設定では、引数に対象となるディレクトリを指定します。この時に圧縮後のファイルに対してリネームを行うことも可能です。 【webpack.config.js】

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const ImageminMozjpeg = require('imagemin-mozjpeg');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env' ]
            }
          }
        ]
      },
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.json' ]
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: `${path.resolve(__dirname, 'src')}/img`,
          to: `${path.resolve(__dirname, 'dist')}/img/[name]_min[ext]`
        }
      ]
    }),
    new ImageminPlugin({
      test: /\.(jpe?g|png|gif|svg)$/i,
      plugins: [
        ImageminMozjpeg({
          quality: 85,
          progressive: true,
        }),
      ],
      pngquant: {
        quality: '70-85',
      },
      gifsicle: {
        interlaced: false,
        optimizationLevel: 10,
        colors: 256,
      },
      svgo: {}
    })
  ]
}

  画像圧縮のplugins設定では、引数に圧縮率などのオプションを指定することができますので、適宜調整していきます。そして、webpackのビルドコマンドやウォッチオプションをつけた監視のコマンドを実行することで圧縮の処理が走るようになります。   実際に変更前と変更後のファイルサイズの変化をみてみますと、このように圧縮されていることが確認できますね。  

---

  今回はwebpackで画像圧縮の処理を作成する方法をまとめてみました。こちらもウェブ制作においては必要となるケースが多いタスクで、Gulp環境でも組み込まれていた方も多いのではないでしょうか。ウェブサイトのパフォーマンスチューニングのためにも是非使えるようにしておきたいですね。   【参考にさせて頂いたサイト】 webpackで画像を圧縮する方法