Шаг 3. Размещение изображений в отдельную директорию

В проекте 17 изображений.

В файле webpack.config.js есть поля module ---> rules, где вешаются обработчики для файлов с разными расширениями: .js, .jsx, .ts, .tsx. Для указанных расширений может быть несколько обработчиков. Например, один будет навешиваться на все расширения, оптимизируя код путём его кеширования — для этого используется thread-loader. И только в самом конце в зависимости от того, хотим ли мы оставлять поддержку старыми браузерами, код будет прогоняться через уже знакомый нам babel-loader.

Пример использования нескольких обработчиков:

 {
  test: /\.(ts?|js?)$/,
  use: [
    {
      loader: 'thread-loader',
      options: {
        workerParallelJobs: 2,
        cacheGroups: {
          default: {
            reuseExistingChunk: true,
            chunks: 'all',
            priority: -20,
            name: 'default',
            test: /\.(ts|js)$/,
            enforce: true,
            minSize: 0,
            minChunks: 1,
          },
        },
      },
    },
    'babel-loader',
  ],
  exclude: /node_modules/,
},

Подробнее об этом мы поговорим в конце курса.

Возьмём самые используемые браузерами форматы изображений: PNG, JPG, JPEG, GIF, SVG, WebP, ICO и AVIF. Чтобы обработать их разом, нам понадобится следующая запись:

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

Используя простое регулярное выражение, в поле test мы разместили все интересующие нас форматы. Обратите внимание на то, что jpe?g — сокращённая запись от JPG и JPEG. Если мы хотим указать webpack, что мы будем работать и с аудиофайлами, нам нужно добавить в это поле расширение mp3?4. Для этого используется разделитель — знак |.

Поле generator --> filename отвечает за то, куда попадут наши изображения. То есть в директории dist автоматически появится новая директория assets, а в ней — img, куда попадут изображения. Имена файлов будут браться от исходных, но с добавлением хеша.

При указании type: 'asset' ко всем файлам применится следующая логика: если файл по умолчанию меньше 8 КБ, то встроить его в собранный бандл, в ином случае — поместить его в директорию с собранным бандлом.