This is a simple plugin that uses Imagemin to compress all images in your project.
npm install imagemin-webpack-plugin
var ImageminPlugin = require('imagemin-webpack-plugin').default
// Or if using ES2015:
// import ImageminPlugin from 'imagemin-webpack-plugin'
module.exports = {
plugins: [
// Make sure that the plugin is after any plugins that add images
// These are the default options:
new ImageminPlugin({
disable: false,
optipng: {
optimizationLevel: 3
},
gifsicle: {
optimizationLevel: 1
},
jpegtran: {
progressive: false
},
svgo: {
},
pngquant: null, // pngquant is not run unless you pass options here
plugins: []
})
]
}
Includes the following imagemin plugins:
To disable a default plugin, pass null
as it's option object. For example, the below options will only run optipng, gifscale, and jpegtran with the default settings (without running svgo):
{
svgo: null
}
At default it would spawn an imagemin process for each cpu-core. But you can override it with maxConcurrency:
{
maxConcurrency: 2
}
Provide any additional plugins you want to have Imagemin run, and their options. Ex:
{
pngquant: {
quality: '95-100'
},
plugins: [
imageminMozjpeg({
quality: 100
})
]
}
Pass disable: true
to disable this plugin, like during development. Defaults to false
.
Why?
I was suprised that there weren't any Imagemin plugins for webpack, so I made one!
Why not use image-webpack-loader
?
Because I had other things like the favicons-webpack-plugin
and responsive-loader
that were generating images that I couldn't have image-webpack-loader
optimize. This plugin will optimize ANY images regardless of how they were added to webpack. Plus image-webpack-loader
is currently using an older version of imagemin.
Can you add this new feature?
Maybe... I'm trying to keep this a small single-purpose plugin, but if you want a feature feel free to open an issue and I'll take a look.
- Big thanks to
image-webpack-loader
for the idea. - Used
compression-webpack-plugin
to learn how to write the plugin. It's source code is a better tutorial on how to write plugins than the webpack documentation is...
The code is written in ES6 using Javascript Standard Style. Feel free to make PRs adding features you want, but please try to follow Standard. Also, codumentation/readme PRs are more then welcome!
MIT Copyright (c) Gregory Benner