webpackでWebPを生成する方法

3 min読了の目安(約3100字TECH技術記事

2010年9月30日、Googleが発表したWebPという静止画像フォーマット。
みなさん、周知の事実であると思います。

Safari14からWebPがサポートされ、ついにモダンブラウザのラインナップが揃いました。これから積極的に使用されていくと思われます。

IEという言葉はこの記事では使用しません。

しかし肝心な生成方法がまだ不足しています。
PhotoShopでプラグインを入れるか、コマンドラインから直接生成するか...

そこで、フロント開発環境でお世話になっているwebpackを使用した、生成方法について執筆していきます。

なお、以下の環境での動作確認です。

"copy-webpack-plugin": "^6.2.0",
"file-loader": "^6.1.0",
"imagemin-webp-webpack-plugin": "^3.3.3",
"path": "^0.12.7",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"

package.json

早速ですが、package.jsonの中身から確認します。

{
  "name": "webp-with-webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "webpack": "NODE_ENV=production webpack",
    "webpack:watch": "NODE_ENV=development webpack -w"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^6.2.0",
    "file-loader": "^6.1.0",
    "imagemin-webp-webpack-plugin": "^3.3.3",
    "path": "^0.12.7",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  }
}

今回のメインは、imagemin-webp-webapck-pluginです。
こちらのプラグインを使用すると、指定したjpgやpngファイルを自動的に変換してくれる様になります。

webpack.config.js

これがないと始まりませんね。webpackの設定ファイルになります。

const path = require('path')
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MODE = process.env.NODE_ENV === 'development' ? 'development' : 'production'

const config = {
  mode: MODE,
  entry: './src/js/main.js',
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
          outputPath: path.resolve(__dirname, 'dist/img')
        }
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{
        from: 'src/img/',
        to: path.resolve(__dirname, 'dist/img')
      }]
    }),
    new ImageminWebpWebpackPlugin({
      config: [{
        test: /\.(jpe?g|png)$/i,
        options: {
          quality: 60
        },
      }],
      detailedLogs: true
    })
  ]
}

module.exports = config

webpackの詳細は省きます。
注目していただきたいのは、plugins配列の中にあるnew ImageminWebpWebpackPluginです。
testプロパティで該当する拡張子を指定し、optionsのqualityは仕上がりの画質程度を指定します。
detailedLogsはビルドのログにどれくらい変わったのか、出力をしてくれます。デフォルトはfalseなので、ここではtrueにしています。

実際に生成する

実際にやってみましょう。
src/imgディレクトリ内に、容量の多いjpgを2枚配置しています。

package.jsonではwebpackコマンドでビルドが始まる様に記述していますので、早速実行してみましょう。

yarn webpack

すると、dist内にwebpが生成されたのがわかります。

さらに、ログには以下が出力されました。

Assetsの部分にjpgとwebpの比較がなされています。
結果から以下のことがわかりました。

  • image1.jpg 3.51MiB -> image1.webp 949KiB
  • image2.jpg 4.01MiB -> image2.webp 1.76MiB

いかがでしょうか。この数値だけでも恐るべしですね。
数値だけでなく、pngに使用すれば透過性は保ったまま、サイズの軽量化が測れるところも魅力的です。

感想

WebPが主流になっていくことは避けされないと思われます。
これを気に積極的に使用していくことにします。

今回の使用モジュールDocument

imagemin-webp-webpack-plugin