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

Пользователь

от lilla.herman , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от ransom_homenick , год назад

@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.

Пользователь

от camren , 4 месяца назад

@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.