imagemin-loader

Imagemin loader module for webpack

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
imagemin-loader
10131.1.15 years ago6 years agoMinified + gzip package size for imagemin-loader in KB

Readme

imagemin-loader
Build Status npm version npm downloads dependencies greenkeeper styled with prettier semantic-release Commitizen friendly
Imagemin hook for webpack 3
Minify all images seamlessly with imagemin

Oh. but Why?

Because none of the other loaders out there would allow me to use my own imagemin plugin.

Install

$ npm install imagemin-loader -D

Usage

In 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.

Options

{
    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
            }
        }
    ]
}

License

MIT © Rafael Milewski