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