Webpack 5 картинки?

Webpack 5 предоставляет различные возможности для работы с изображениями. Ниже я расскажу о нескольких способах, которые можно использовать для загрузки и оптимизации изображений в вашем проекте с использованием Webpack 5.

1. Загрузка изображений:

Webpack позволяет загружать изображения в ваш проект, используя различные загрузчики. Например, вы можете использовать загрузчик file-loader для копирования изображений в выходную папку вашего проекта:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images',
            },
          },
        ],
      },
    ],
  },
};

В этом примере мы указываем Webpack, чтобы он использовал file-loader для всех файлов с расширениями .png, .jpg, .jpeg или .gif. Он будет копировать файлы в папку images в выходной директории с сохранением их исходных имен.

2. Оптимизация изображений:

Webpack также предоставляет возможность оптимизации изображений для улучшения производительности вашего проекта. Для этого вы можете использовать загрузчик image-webpack-loader, который позволяет выполнять различные операции оптимизации изображений, такие как сжатие, изменение размера и т. д.:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
};

В этом примере мы добавляем image-webpack-loader после file-loader, чтобы оптимизировать изображения перед их загрузкой. Мы также настраиваем различные параметры оптимизации для различных типов изображений, таких как mozjpeg для JPEG, optipng для PNG и т. д.

3. Использование изображений в коде:

После загрузки и оптимизации изображений вы можете использовать их в своем коде. Например, для использования изображения в HTML-файле, вы можете использовать плагин html-loader:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.html$/,
        use: ['html-loader'],
      },
    ],
  },
};

4. WebP формат изображений:

Webpack 5 также поддерживает WebP формат изображений. Вы можете использовать загрузчик url-loader, чтобы конвертировать изображения в WebP и загружать их в зависимости от размера файла. Например:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // конвертирование в base64, если размер меньше 8KB
              name: '[name].[hash:8].[ext]',
              outputPath: 'images',
              fallback: require.resolve('responsive-loader'),
              quality: 85,
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
};

В этом примере мы используем url-loader для конвертации изображений в WebP автоматически. Он также предоставляет настройки для определения предела размера файла, имени файла, выходной директории и т. д.

Это лишь несколько способ, которые вы можете использовать для работы с изображениями в проекте с использованием Webpack 5. В зависимости от ваших требований и настроек, вы можете выбрать подходящий инструмент или комбинацию инструментов, чтобы достичь необходимого результата.