image-webpack-loader使用方法

image-webpack-loader是一个webpack加载器，用于优化图片加载。使用它可以将图片压缩、转换为WebP格式或Base64编码，从而减少页面加载时间和带宽占用。

以下是使用image-webpack-loader的方法：

1. 安装image-webpack-loader：

npm install --save-dev image-webpack-loader

2. 在webpack配置文件中配置loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
              publicPath: 'images/'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
}

3. 运行webpack打包命令，图片会被压缩、转换为WebP格式或Base64编码，然后输出到指定目录下。

希望这能帮到你！