webpack-image-resize-plugin's Introduction

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",
        },
      },
    ],
  },

webpack-image-resize-plugin's People

Watchers

webpack-image-resize-plugin's Issues

gif를 리사이징하면 frame이 1장만 남는다.

Sharp 라이브러리와 gifsicle을 exec로 노드에서 직접 실행시키는 방법을 시도했음.

Sharp 라이브러리및 imagemin을 사용하면 리사이징 가능. but Buffer를 다시 webpack asset으로 바꿔주는 과정에서 RawResource에 length가 잘못입력되어 frame이 1개만 남음.
gifsicle을 exec로 직접 실행했더니 결과가 씹힘. webpack plugin이라서 그런가봄.
코드작업 다 끝나고 수동으로 gifsicle 명령어 치니까 잘됨.

Recommend Projects