1. image-webpack-loader
Image loader module for webpack
image-webpack-loader
Package: image-webpack-loader
Created by: tcoopman
Last modified: Sun, 19 Jun 2022 00:35:44 GMT
Version: 8.1.0
License: MIT
Downloads: 879,570
Repository: https://github.com/tcoopman/image-webpack-loader

Install

npm install image-webpack-loader
yarn add image-webpack-loader

Dependencies status
devDependencies status
Build status

image-webpack-loader

Image loader module for webpack

Minify PNG, JPEG, GIF, SVG and WEBP images with imagemin

Issues with the output should be reported on the imagemin issue tracker.

Install

 $ npm install image-webpack-loader --save-dev

Install in container

node:12-buster

No additional preparations required.
All dependencies will be compiled automatically.
Not recommended because of large image size (~1 GB).

node:12-buster-slim

Prepare script:

 apt-get update
apt-get install -y --no-install-recommends autoconf automake g++ libpng-dev make

Recommended container image.

node:12-alpine

Prepare script:

 apk add --no-cache autoconf automake file g++ libtool make nasm libpng-dev

Not recommended because of long build time.

Benchmark

Container distro Pull time Build time Total time
node:12-buster 42 seconds 77 seconds 119 seconds
node:12-buster-slim 11 seconds 103 seconds 114 seconds
node:12-alpine 8 seconds 122 seconds 130 seconds

libpng issues

Installing on some versions of OSX may raise errors with a missing libpng dependency:

Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib

This can be remedied by installing the newest version of libpng with homebrew:

 brew install libpng

Usage

Documentation: Using loaders

In your webpack.config.js, add the image-loader, chained after the file-loader:

 rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true, // [email protected]
        disable: true, // [email protected] and newer
      },
    },
  ],
}]

For each optimizer you wish to configure, specify the corresponding key in options:

 rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    },
  ],
}]

Comes bundled with the following optimizers, which are automatically enabled by default:

And optional optimizers:

  • webpCompress JPG & PNG images into WEBP

Each optimizers can be disabled by specifying optimizer.enabled: false, and optional ones can be enabled by simply putting them in the options

If you are using Webpack 1, take a look at the old docs (or consider upgrading).

Options

Loader options:

bypassOnDebug (all)

Type: boolean
Default: false

Using this, no processing is done when webpack 'debug' mode is used and the loader acts as a regular file-loader. Use this to speed up initial and, to a lesser extent, subsequent compilations while developing or using webpack-dev-server. Normal builds are processed normally, outputting optimized files.

disable

Type: boolean
Default false

Same functionality as bypassOnDebug option, but doesn't depend on webpack debug mode, which was deprecated in 2.x. Basically you want to use this option if you're running [email protected] or newer.

For optimizer options, an up-to-date and exhaustive list is available on each optimizer repository:

Inspiration

License

MIT (http://www.opensource.org/licenses/mit-license.php)

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code