响应式加载器链接 webpack

Question

我是初学者 webpack 用户。我想优化我的图像，然后再优化 根据视口提供不同大小的它们。所以我一开始想到的是：

...

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

我的想法是：

• 使用“image-wbpack-loader”优化我的图片

• 如果它的优化版本少于 10k 位而不是使其 64base 编码

• 如果不是用 'responsive-loader' 加载它

• 最后将 'responsive-loader' 生成的所有图片推送到 /imgs 目录

唯一的问题是它不起作用。 我试图找到其他方法，但我找到了“imagemin-webpack-plugin”。我尝试通过写作来使用它：

 new CopyWebpackPlugin([
      {from: './src/imgs', to: './imgs'}
    ]),
 new ImageminPlugin({
      { test: 'imgs/**'}
    }}),

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

Answer 1

我找到了答案。 Responsive-loader 具有“质量”选项，可让我定义我想要优化图像的程度。不需要其他插件。