Assets u Webpack-u

U svakom projektu postoje neki resursi ili assets (assets). Ovi asseti predstavljaju slike, fajlove fontova i tome slične stvari.

U pravilu, želimo jednostavno da prenesemo resurse iz projekat fascikle u build fasciklu. Ali opet se javlja problem sa kešom. Na primer, brauzer kešira slike. To znači da ako promenimo sliku na slici, a ne promenimo ime njenog fajla, onda korisnici sajta videće prethodnu verziju slike, pošto im je ona zakeširana.

Rešenje problema, kao što već znate, je dodavanje heša u ime fajla. Webpack omogućava kopiranje fajlova resursa u build fasciklu, dodajući im pritom heševe i, što je najvažnije, menjajući u svim fajlovima putanje do ovih resursa na nove.

U Webpack-u rad sa assetima se obavlja pomoću specijalnih assets-modula. Postoje četiri tipa: asset/resource, asset/inline, asset/source, asset.

Modul asset/resource kopira fajlove iz projekat fascikle u build fasciklu i zamenjuje putanje do njih na nove. Modul asset/inline uzima fajlove iz projekat fascikle i u kodu build-a zamenjuje putanje do fajlova na base64. Modul asset/source uzima fajlove iz projekat fascikle i vraća ih u vidu tekstualnog stringa. Modul asset sam bira, da li kopirati fajl u build fasciklu ili ga pretvoriti u base. Izbor se vrši u zavisnosti od veličine fajla. Podrazumevano, fajlovi veći od 8kb se sakupljaju u fajlove.

Opšta shema primene ovih modula izgleda na sledeći način:

module: {
	rules: [
		{
			test: /\.png$/,        // fajlovi
			type: 'asset/resource' // tip modula
		}
	]
},

Objasnite šta se podrazumeva pod assetima.

Potražite na internetu šta je base64 i kako se primenjuje u CSS-u.

Nabrojite 4 tipa modula za assete.

Objasnite, za šta je namenjen svaki od 4 tipova modula.