Question

我正在尝试从gulp过渡到webpack，并且正在尝试优化我的图像。我发现img-loader是使用最广泛的工具，虽然它非常适合CSS或html文件中引用的图像，但我并不是直接引用某些图像，但仍需要对其进行优化并将其移至dist文件夹。 / p>

我一直在研究实现此目的的方法，但是我找不到任何只涉及优化的示例，大多数似乎都集中在构建静态页面上，因为我在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(),
      },
    ])
  ]
}

如果您想使用与img-loader相同的优化器，也可以结帐imagemin，也可以将相同的选项同时传递给两者。

使用Webpack优化未引用的图像（img-loader）

1 个答案: