webpack-image-resize-plugin

webpack-webp-convert-plugin

Resize your images using webpack plugin!

Support

Only webpack 5

Before

After

Usage

npm i webpack-image-resize-plugin --save-dev

or

yarn add -D webpack-image-resize-plugin

// webpack.config.js
const WebpackImageResizePlugin = require("webpack-image-resize-plugin");

...
plugins: [
    new ImageResizePlugin({
      gifInfo: {
        width: 100,
        height: 100,
        toWebp: true
      },
      imgInfo: {
        width: 1920,
        height: 1080,
        quality: 100,
        toWebp: true
      },
    }),
]
...

When you use toWebp options.

Please use file-loader like this. (webpack.config.js)

// webpack.config.js

module: {
    rules: [
      {
        test: /\.(png|jpg|jpg|gif|webp)$/i,
        loader: "file-loader",
        options: {
          name: "static/[name].webp",
        },
      },
    ],
  },