Шаг 4. Работа с изображениями

Мы подобрались к наиболее проблемной части работы. Проблема в том, что у некоторых разработчиков отсутствуют импорты изображений, указаны неверные пути к файлам и нет какой-либо обработки картинок. Но обо всём по порядку.

Для обработки изображений в webpack есть встроенная функция asset — мы будем её использовать.

Давайте посмотрим, что произойдёт при изменении разрешённых размеров (по умолчанию). В том же файле, webpack.config.js, в поле module --> rules добавляем или заменяем (при наличии) запись:

{
  test: /\.(png|jpe?g|gif|svg|webp|ico|avif|mp3)$/i,
  type: 'asset',
  generator: {
    filename: 'assets/img/[name].[hash].[ext]',
  },
  parser: {
    dataUrlCondition: {
      maxSize: 10 * 1024,
    },
  },
}

После добавления webpack понимает, что указанные расширения файлов являются модулями. Но что произойдёт после сборки?

Вместо трёх файлов остался один. Но где все остальные? Всё просто: подходящие по размеру изображения webpack автоматически преобразовал в нечитабельный набор символов.