Ownedmedia ウェブ制作に役立つコンテンツを発信中!

webpack 2021.06.07

webpackで画像圧縮を自動化する環境を構築する

Tags: ,,,,

引き続き今回も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で画像を圧縮する方法

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?