使用webpack优化未引用的图像(img-loader)

Question

我正在尝试从大口地喝水过渡到webpack，我正在努力优化我的形象。我发现img-loader是使用最广泛的，虽然这对CSS或html文件中引用的图像非常有效，但我没有直接引用一些图像，但仍然需要对它们进行优化并将其移动到dist文件夹中。

我一直在寻找这样做的方法，但我找不到任何只涵盖优化的例子，大多数似乎都集中在构建的静态页面上，因为我在WordPress主题中使用了这一点。

理想情况下，我只想在整个目录上运行映像优化，并将它们保存到dist中

目前，我有以下内容

{
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
        {
            loader: 'file-loader',
            options: {
                outputPath: 'images',
            },
        },
        'img-loader'
    ]
}

Answer 1

就像@PlayMa256所说的那样，webpack是一个捆绑者，而不是一个真正的gulp的替代品！但是，您可以通过将copy-webpack-plugin与sharp之类的优化器相结合，迫使webpack做您想做的事情

也许是这样的

const CopyWebpackPlugin = require('copy-webpack-plugin');
const sharp = require('sharp');

module.exports = {
  ...
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'src/images/*.png',
        to: 'images',
        flatten: true,
        transform: content => sharp(content).resize(300).toBuffer(),
      },
    ])
  ]
}

或者签出imagemin如果您希望使用与img-loader相同的优化器，您可能也可以将相同的选项传递给这两个优化器。