Использование веб-пакета для оптимизации изображений без ссылок (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 - это пакет, а не замена глотку! Тем не менее, вы можете принудительно заставить webpack делать то, что вы хотите, комбинируя copy-webpack-plugin с таким оптимизатором, как sharp

Возможно, как-то так

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, вы, вероятно, можете передать один и тот же параметр обоим.