webpackでWebPを使ってみる

webpackでWebPを生成する方法をメモ。

サンプルコード

プロジェクトディレクトリでpackage.jsonを作成後、使用するプラグインをインストールします。

npm install webpack webpack-cli imagemin-webp-webpack-plugin copy-webpack-plugin --save-dev

プロジェクトディレクトリ内にsrcディレクトリを作成して、その中にindex.jsを作成します。
今回は特に使用しないので、中身はなんでも大丈夫です。

index.js

console.log('hello world');

webpack.config.jsを以下のように記述します。

const path = require("path");
const ImageminWebpWebpackPlugin= require("imagemin-webp-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
  mode: "production",
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "img"),
          to: path.resolve(__dirname, "dist", "img")
        },
      ],
    }),
    new ImageminWebpWebpackPlugin({
      config: [{
        test: /\.(png|jpe?g)$/i, // 対象ファイル
        options: {
          quality:  75 // 画質
        }
      }]
    })
  ]
};

「/src/img/」内にあるpng/jpgファイル元にWebPを生成して、「/dist/img/」に出力する設定になっています。
また、「/dist/img/」には元のpng/jpg形式のファイルも出力されるようになっています。