Imagemin hook for webpack 3
Minify all images seamlessly with imagemin
Because none of the other loaders out there would allow me to use my own imagemin plugin.
$ npm install imagemin-loader -DIn your webpack.config.js add the imagemin-loader, chained with the file-loader, url-loader or raw-loader:
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
/** file-loader | url-loader | raw-loader **/
{ loader: 'file-loader' },
{
loader: 'imagemin-loader',
options: {
// enabled: process.env.NODE_ENV === 'production',
plugins: [
{
use: 'imagemin-pngquant',
options: {
quality: '50-60'
}
},
{
/** Alternative syntax **/
use: require('imagemin-guetzli'),
options: {
enabled: process.env.NODE_ENV === 'production',
quality: 95
}
}
]
}
}
]
}
]
}You can use any imagemin plugin, simple include it on the plugin array and install it as a local dependency.
{
enabled: boolean, // Enable or disable the loader globally
plugins: [
{
use: string|function, // Package name like: 'imagemin-gifsicle', require('imagemin-gifsicle') or a Function
options: {
enabled: boolean, // Enable or disable at the plugin level
...ImageMinPluginOptions // Specific plugin options
}
}
]
}