Webpack-Image-Compress-Plugin

English | 简体中文

A webpack plugin to compress images(png|jpe?g) by using tinypng.com

You can view the specific compression information through the log,
and you can control the number of concurrent requests

Install

$ npm i webpack-tinypng-image-compress-plugin --save-dev

Usage

webpack.config.js

const WebpackImageCompressPlugin = require('webpack-tinypng-image-compress-plugin')

// Use Default Config
module.exports = {
  plugins: [new WebpackImageCompressPlugin()]
}

---------------------or----------------------

// Custom Config
module.exports = {
  //... your config
  plugins: [
    new WebpackImageCompressPlugin({
      log: true, // Boolean ===> Show compressed information on the console (default: true)
      compress: process.env.NODE_ENV === "production", // Boolean ===> Whether to enable compression (default: true)
      concurrency: 20, // Number ===> The number of concurrent requests (default: 20)
      minSize: 1024 * 10, // Number ===> Minimum size of image compression (default: 1024 * 10)
    })
  ]
}

vue.config.js

const WebpackImageCompressPlugin = require('webpack-image-compress-plugin')

module.exports = {
  //... your config
  configureWebpack: {
    plugins: [
      new WebpackImageCompressPlugin({
        log: true, // Boolean ===> Show compressed information on the console
        compress: process.env.NODE_ENV === "production", // Boolean ===> Whether to enable compression
        concurrency: 20, // Number ===> The number of concurrent requests (default: 20)
        minSize: 1024 * 10, // Number ===> Minimum size of image compression (default: 1024 * 10)
        maxSize: 1024 * 100 // Number ===> Maximum size of image compression (default: no limit)
      })
    ]
  }
}

License

MIT

Others

You can submit Issue or follow me or Star⭐