无法全局配置映像包加载器

Question

我想在全球范围内配置Image-webpack-loader与文档相同。

webpack 2还有另一种设置此设置的方法。现在，我们需要使用LoaderOptionsPlugin来配置加载程序。

这就是我要做的：

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

结果我开始遇到错误：

ERROR in ./imgs/imgInStyles.jpg
    Module build failed: TypeError: Cannot read property 'bypassOnDebug' of null
        at Object.module.exports (D:workresearchdeploymentwebpackwebpack2-config-samplenode_modulesimage-webpack-loaderindex.js:30:26)
     @ ./~/css-loader!./~/postcss-loader!./~/sass-loader/lib/loader.js!./app/pages/home/home.scss 6:158-198

看来我已经配置了LoaderOptionsplugin错误，但无法理解问题在哪里。

Answer 1

LoaderOptionsPlugin是使从WebPack 1的过渡更加容易。在WebPack 2中，您应该直接在加载程序上定义选项。

您的规则看起来像这样(使用您的选项中的WebPack 2规则使用WebPack 2规则(：

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