Ассеты в Webpack

В каждом проекте есть некоторые ресурсы или ассеты, которые представляют собой картинки, файлы шрифтов и тому подобные вещи.

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

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

В Webpack работа с ассетами осуществляется с помощью специальных assets-модулей:

• asset/resource копирует файлы из папки проекта в папку сборки и заменяет пути к ним на новые
• asset/inline берет файлы из папки проекта и в коде сборки заменяет пути к файлам на base64
• asset/source берет файлы из папки проекта и возвращает их в виде текстовой строки
• asset выбирает, копировать файл в папку сборки или превращать его в base64, выбор осуществляется в зависимости от размера файла, по умолчанию файлы более 8kb собираются в файлы

Общая схема применения этих модулей выглядит следующим образом:

webpack.config.jsmodule: {
  rules: [
    {
      // файлы
      test: /\.png$/,
      // тип модуля
      type: "asset/resource",
    },
  ];
}