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.
$ npm install image-webpack-loader --save-dev
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
webpack.config.js, add the image-loader, chained after the file-loader:
loaders:test: /\.$/iuse:'file-loader'loader: 'image-webpack-loader'options:bypassOnDebug: true
For each optimizer you wish to configure, specify the corresponding key in options:
loaders:test: /\.$/iuse:'file-loader'loader: 'image-webpack-loader'options:mozjpeg:progressive: truequality: 65// optipng.enabled: false will disable optipngoptipng:enabled: falsepngquant:quality: '65-90'speed: 4gifsicle:interlaced: false// the webp option will enable WEBPwebp:quality: 75
Comes bundled with the following optimizers:
And optional optimizers:
Default 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).
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.
For optimizer options, an up-to-date and exhaustive list is available on each optimizer repository: