ついにImageMinimizerWebpackPluginがSquooshに対応！
12/6にメジャーアップデートがあり、ついにSqooshに対応した。
https://www.npmjs.com/package/image-minimizer-webpack-plugin
じつは今までもこのページにはSqooshの使い方が書いてあったのだが、v2ではライブラリが搭載されておらず、GitHubからmasterをプルした場合のみ使える状態で、ずっとアップデートを待っていた状態だったのだ。
特定ディレクトリ内の画像を一括で変換するだけの処理を作ってみた
要件
/src/assets/images 以下の画像を /public/assets/images に吐き出す
サブディレクトリも対象とし、階層構造を維持する
png, jpgファイルが対象
Webpにロスレスで変換する。 その際のファイル名は xxx.png.webp, xxx.jpg.webp
読み込み元の画像が削除されても対応できるようにする
変換プログラムは都度実行してもよい（watchはしない）
→ 開発中に画像ファイルがコロコロ変更されることはあまり考えられないため
1. なにはともあれインストール
ImageMinimizerWebpackPluginとSquooshをインストールする。
npm i -D image-minimizer-webpack-plugin @squoosh/lib
# 既にインストール済みで imagemin-xxx を使っている場合は削除
npm rm imagemin-jpegtran imagemin-optipng imagemin-webp
# また、今回必要なパッケージもインストールする
npm i -D copy-webpack-plugin path
2. webpack.config.js を作成
webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const path = require('path');
module.exports = {
mode: "development",
entry: path.resolve(__dirname, 'src/dummy.js'),
output: {
clean: true,
path: path.resolve(__dirname, 'public'),
},
plugins: [
new CopyWebpackPlugin({
patterns: [{
from: path.resolve(__dirname, 'src/assets/images'),
to: path.resolve(__dirname, 'public/assets/images')
}]
}),
new ImageMinimizerPlugin({
test: /\.(png|jpe?g)$/i,
deleteOriginalAssets: false,
minimizer: {
filename: '[path][name][ext].webp',
implementation: ImageMinimizerPlugin.squooshMinify,
options: {
encodeOptions: {
webp: {
lossless: 1,
},
},
},
},
}),
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.squooshMinify,
options: {
encodeOptions: {
mozjpeg: {
quality: 85,
},
oxipng: {
level: 3,
interlace: false,
}
},
},
},
}),
]
}
3. ダミーファイル配置
/src/dummy.js に空のファイルを配置
4. 実行
node node_modules/webpack/bin/webpack
または package.json に記述して実行
package.json
...
"scripts": {
"image": "webpack",
},
...
npm run image
4. 結果
↧