使用 webpack 优化未引用的图片（img-loader）

Question

我正在尝试从 gulp 过渡到 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，您也可以将相同的选项传递给两者。