Zasoby w Webpack

W każdym projekcie znajdują się pewne zasoby lub assets (assets). Te zasoby to obrazy, pliki czcionek i tym podobne rzeczy.

Z reguły chcemy po prostu przenieść zasoby z folderu projektu do folderu budowania. Ale znowu pojawia się problem z pamięcią podręcznej. Na przykład, przeglądarka buforuje obrazy. Oznacza to, że jeśli zmienimy obraz, nie zmieniając nazwy jego pliku, to użytkownicy strony zobaczą poprzednią wersję obrazu, ponieważ została ona u nich zapisana w pamięci podręcznej.

Rozwiązaniem problemu, jak już wiesz, jest dodanie skrótu do nazwy pliku. Webpack umożliwia kopiowanie plików zasobów do folderu budowania, dodając do nich przy tym skróty i, co najważniejsze, zmieniając we wszystkich plikach ścieżki do tych zasobów na nowe.

W Webpack praca z zasobami jest realizowana za pomocą specjalnych modułów assets. Istnieją cztery typy: asset/resource, asset/inline, asset/source, asset.

Moduł asset/resource kopiuje pliki z folderu projektu do folderu budowania i zastępuje ścieżki do nich na nowe. Moduł asset/inline pobiera pliki z folderu projektu i w kodzie budowania zastępuje ścieżki do plików na base64. Moduł asset/source pobiera pliki z folderu projektu i zwraca je w postaci ciągu tekstowego. Moduł asset sam wybiera, skopiować plik do folderu budowania czy przekształcić go na base. Wybór jest dokonywany w zależności od rozmiaru pliku. Domyślnie pliki większe niż 8kb są zbierane do plików.

Ogólny schemat zastosowania tych modułów wygląda następująco:

module: {
	rules: [
		{
			test: /\.png$/,        // pliki
			type: 'asset/resource' // typ modułu
		}
	]
},

Wyjaśnij, co rozumie się przez zasoby.

Wyszukaj, co to jest base64 i jak się go stosuje w CSS.

Wymień 4 typy modułów dla zasobów.

Opowiedz, do czego służy każdy z 4 typów modułów.