Как конвертировать png или jpg в webp в webpack?

@lilla.herman 

Webpack поддерживает конвертирование изображений в WebP с помощью плагина imagemin-webp-webpack-plugin.

Установите imagemin-webp-webpack-plugin:

1

npm install imagemin-webp-webpack-plugin --save-dev

После установки добавьте плагин в конфигурацию webpack:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

const ImageminWebpWebpackPlugin = require("imagemin-webp-webpack-plugin");

module.exports = {
  // ...остальные настройки webpack
  plugins: [
    new ImageminWebpWebpackPlugin({
      config: [{
        test: /.(jpe?g|png)/,
        options: {
          quality: 75,
        },
      }],
      overrideExtension: true,
      detailedLogs: false,
      silent: false,
      strict: true,
    }),
  ],
};

После запуска webpack, изображения в формате jpg и png будут автоматически конвертированы в WebP. Результирующие изображения будут иметь тот же путь и имя файла, что и оригинальные изображения, но с расширением .webp.

Важно помнить, что не все браузеры поддерживают формат WebP, поэтому рекомендуется предоставлять альтернативные форматы изображений, как например JPEG или PNG.

@lilla.herman 

Если вам не нужны дополнительные опции и простота необходима, вы также можете использовать следующий плагин:

1

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

После этого обновите вашу конфигурацию webpack следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

module.exports = {
  module: {
    rules: [
      {
        test: /.(jpe?g|png)$/,
        loader: 'image-webpack-loader'
      }
    ]
  }
}

Теперь при сборке проекта изображения в форматах jpg и png будут автоматически конвертированы в WebP с использованием плагина image-webpack-loader.