无法全局配置image-webpack-loader

Question

I want to configure image-webpack-loader globally the same to it's documentation.

Webpack 2 has another way for setting this. Now we need to use LoaderOptionsPlugin to configure loaders.

This is what i'm trying to do:

plugins: [
            new webpack.LoaderOptionsPlugin({
                options: {
                    imageWebpackLoader: {
                        mozjpeg: {
                            quality: 65,
                        },
                        pngquant: {
                            quality: '65-90',
                            speed: 4,
                        },
                        svgo: {
                            plugins: [
                                {
                                    removeViewBox: false,
                                },
                                {
                                    removeEmptyAttrs: false,
                                },
                            ],
                        },
                    },
                },
            }),
        ],

As a result i'm starting to get error:

ERROR in ./imgs/imgInStyles.jpg
    Module build failed: TypeError: Cannot read property 'bypassOnDebug' of null
        at Object.module.exports (D:\work\research\deployment\webpack\webpack2-config-sample\node_modules\image-webpack-loader\index.js:30:26)
     @ ./~/css-loader!./~/postcss-loader!./~/sass-loader/lib/loader.js!./app/pages/home/home.scss 6:158-198

It seems that i have configured LoaderOptionsPlugin wrong but can't understand where is the issue.

Answer 1

The LoaderOptionsPlugin is to make the transition from webpack 1 easier. In webpack 2 you should define the options directly on the loader.

Your rule would look like this (using the webpack 2 rule from the README with your options):

{
    test: /\.(gif|png|jpe?g|svg)$/i,
    use: [
        'file-loader',
        {
            loader: 'image-webpack-loader',
            options: {
                mozjpeg: {
                    quality: 65,
                },
                pngquant: {
                    quality: '65-90',
                    speed: 4,
                },
                svgo: {
                    plugins: [
                        {
                            removeViewBox: false,
                        },
                        {
                            removeEmptyAttrs: false,
                        },
                    ],
                }
            }
        }
    ]
}