Question

我是初学者webpack用户。我想优化我的图像，然后再进行根据视口提供不同大小的服务。所以我最初想到的是：

(SELECT id FROM my_table ORDER BY columnA DESC LIMIT 600)
INTERSECT
(SELECT id FROM my_table ORDER BY columnB DESC LIMIT 400, 999999999999)
INTERSECT
(SELECT id FROM my_table ORDER BY columnC DESC LIMIT 800)
INTERSECT
(SELECT id FROM my_table WHERE revenue > 10000)

我在想的是：

使用＆＃39; image-wbpack-loader
如果它的优化版本小于10k位而不是64位编码
如果不是用响应加载程序加载它＃39;
最后推送所有“响应式加载器”的图像。生成到/ imgs目录

唯一的问题是它不起作用。我试图找到其他方法来做这件事，我找到了＆＃39; imagemin-webpack-plugin＆＃39;。我尝试通过写作来使用它：

...

 {
            test: /\.(jpg|png)$/,
            use: [{loader: 'file-loader',
            options:{
                name: '[name].[ext]',
                outputPath: '/imgs',
                publicPath: '/imgs'
            }}, {
                loader: "url-loader",
                options: {
                    limit: 10000,
                    fallback: 'responsive-loader'
                }},
                "image-webpack-loader"
            ]
        },
...

它按预期工作。复制并优化了我的所有图像。但我现在无法对它们使用任何加载程序的操作，因为它们已经在dist目录中。有没有办法达到我想要的效果？谢谢你的帮助。

Answer 1

我找到了答案。响应式加载器具有“质量”和“质量”。这个选项让我可以定义我想要优化图像的程度。没有其他插件是必要的。

响应式加载器链接webpack

1 个答案: