Home
JavaScript
webpack環境で画像追加を監視して自動圧縮&WebP変換する方法

webpack環境で画像追加を監視して自動圧縮&WebP変換する方法

webpack環境で画像追加を監視して自動圧縮&WebP変換する方法

どうも!かけちまるです!

サイト表示スピードに関わる部分なので、画像圧縮やWebPを活用してファイルサイズを抑えたいところ。

画像圧縮ツールやWebP変換ツールを使うのもいいけど、もう少し自動化できないかなぁと思いました。
そこで、webpack環境で画像の更新を感知して、自動圧縮する設定をしてみました。
GitHubにコードを公開しているのでダウンロードして本記事を見てもらえると理解しやすいと思います。

この記事では、

  • ・機能要件
  • ・想定する作業フロー
  • ・圧縮&WebP変換部分の解説

がわかります。

はじめに

GitHubから完成形をダウンロードしてから、この記事を読んでもらうと理解しやすいかもです。
圧縮&WebP変換の部分的な解説になるので、コピペしても動かない可能性があります。
完成形に書いてある他の設定も見て、ご自分のディレクトリ構成用に最適化してもらえると良いかと。

完成形のリポジトリはこちらです。

npm iパッケージインストールを忘れないように。

ちなみに、ディレクトリ構成はこんな感じです。

ディレクトリ構成
開く&閉じるコピー
src ┗ css ┣ (style.css) ┗ images ┗ js ┗(index.js) package-lock.json package.json webpack.common.js webpack.dev.js webpack.prod.js

機能要件

叶えたい条件としては次のような感じです。

  • ・対象はjpgpng
  • /src/images/を更新したら/dist/images/に圧縮&WebP変換されること
  • ・本番公開時は/dist/images/に不要ファイルが含まれていないこと

想定する作業フロー

開発時

  • npm run start/src/images/の監視&ローカルサーバの立ち上げ
  • /src/images/内を更新
  • /dist/images/へ圧縮&WebPファイルを作成
  • ④WebPファイルを/src/images/コピー

本番公開時

  • npm run buildでproductionモード
  • /dist/images/内を/src/images/内にコピー
  • ③ビルド開始

圧縮&WebP変換部分の解説

GitHubの完成形をもとに解説しています。

開発用ファイルの画像圧縮&WebP変換の設定

使用パッケージ
  • image-minimizer-webpack-plugin
    画像を最適化(圧縮/生成)するための大枠的なやつ。
  • imagemin
    画像を最適化(圧縮/生成)するためのツール。
  • imagemin-mozjpeg
    jpg用のいろんな設定ができるやつ。
  • imagemin-pngquant
    png用のいろんな設定ができるやつ。
  • imagemin-webp
    webp用のいろんな設定ができるやつ。
  • copy-webpack-plugin
    ファイルやディレクトリをビルドディレクトリにコピーできるやつ。
    開発時はとりあえず全画像に処理をかけたいので追加しています。
    これがないと使用している画像しか処理されないので、WebPが/src/images/にコピーされてきません。
  • filemanager-webpack-plugin
    ビルド前後にコピーや削除とかをできるやつ。
    /dist/imeges/に生成されたWebPを使用できるように/src/images/にコピーします。
webpack.dev.js
開く&閉じるコピー
const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); const FileManagerPlugin = require('filemanager-webpack-plugin'); module.exports = merge(common(), { mode: 'development', plugins: [ // コピーの設定 new CopyWebpackPlugin({ patterns: [{ from: path.resolve(__dirname, 'src/images'), to: path.resolve(__dirname, 'dist/images') }] }), // 圧縮&WebP変換の記述 new ImageMinimizerPlugin({ // 圧縮の記述 minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [ ['mozjpeg', { quality: 75 }], // jpgの設定 ['pngquant', { quality: [0.75, 0.75] }], // pngの設定 ], }, }, // WebP変換の記述 generator: [ { type: 'asset', implementation: ImageMinimizerPlugin.imageminGenerate, options: { plugins: [ ['webp', { quality: 75 }], // webpの設定 ] }, }, ], }), // ビルドが終わったら、WebPを/src/images/にコピーする new FileManagerPlugin({ events: { onEnd: { copy: [ { source: path.resolve(__dirname, 'dist/images/*.webp'), destination: path.resolve(__dirname, 'src/images/'), }, ], }, } }), ] });

ポイントは、webpack.common.jsoutputcleanオプションをつけること。
これがないと/src/images/内が更新されたときにうまく動かないです。

webpack.common.js
開く&閉じるコピー
const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = () => ({ entry: './src/js/index.js', output: { clean: true, path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, ・・・ });

本番用ファイルの設定

使用パッケージ
  • filemanager-webpack-plugin
    ビルド前後にコピーや削除とかをできるやつ。
    /src/images/内は圧縮していない画像があるのでビルド前に/dist/images/内を全部コピーしておきます。
webpack.prod.js
開く&閉じるコピー
const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); const path = require('path'); const FileManagerPlugin = require('filemanager-webpack-plugin'); module.exports = merge(common(), { mode: 'production', plugins: [ // ビルド前に、/dist/imeges/内の画像を/src/images/にコピーする new FileManagerPlugin({ events: { onStart: { copy: [ { source: path.resolve(__dirname, 'dist/images/*'), destination: path.resolve(__dirname, 'src/images/'), }, ], }, } }) ] });

package.jsonのscripts設定

使用パッケージ
  • onchange
    ターゲットが更新されたらコマンドを実装するやつ。
    /src/images/内でjpgpngなんかしらの更新があったらwebpack.dev.jsの処理が走る。
package.json
開く&閉じるコピー
{ ・・・ "scripts": { "start": "webpack serve --config ./webpack.dev.js & onchange ./src/images/*.{jpg,jpeg,png} -- webpack --config ./webpack.dev.js", "build": "webpack --config ./webpack.prod.js", "dev": "webpack --config ./webpack.dev.js" }, ・・・ }

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

Local by Flywheelで本番環境のWordPressをローカルに複製する

Local by Flywheelで本番環境のWordPressをローカルに複製する

【雪を降らせる】particles.jsを使って簡単にアニメーション

【雪を降らせる】particles.jsを使って簡単にアニメーション

jQueryでスクロール中か否かを判定する方法

jQueryでスクロール中か否かを判定する方法

【WordPress】PHPテンプレートでショートコードを使う方法

【WordPress】PHPテンプレートでショートコードを使う方法

translateを使わずにpositionで要素を中央寄せにする方法

translateを使わずにpositionで要素を中央寄せにする方法

Visual Studio Codeでソースを自動整形する方法

Visual Studio Codeでソースを自動整形する方法