Ассеты в 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-х типов модулей.