# Ассеты в Webpack

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

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

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

В Webpack работа с ассетами осуществляется с помощью специальных assets-модулей. Их четыре типа: `asset/resource`, `asset/inline`, `asset/source`, `asset`.

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

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

`module: { rules: [ { test: /\.png$/, // файлы type: 'asset/resource' // тип модуля } ] },`

Расскажите, что понимается под ассетами.

Погуглите, что такое base64 и как его применяют в CSS.

Перечислите `4` типа модулей для ассетов.

Расскажите, для чего предназначен каждый из `4`-х типов модулей.

←→
↑