webpackで画像圧縮を自動化する環境を構築する
最終更新日: Update!!
引き続き今回も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」もインストールしていきます。
今回はwebpackで画像圧縮の処理を作成する方法をまとめてみました。こちらもウェブ制作においては必要となるケースが多いタスクで、Gulp環境でも組み込まれていた方も多いのではないでしょうか。ウェブサイトのパフォーマンスチューニングのためにも是非使えるようにしておきたいですね。 【参考にさせて頂いたサイト】 webpackで画像を圧縮する方法
$ 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で画像を圧縮する方法
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories