Asetet në Webpack

Në çdo projekt ka disa burime ose asetet (assets). Këto asete përfaqësojnë foto, fajlla të fontave dhe gjëra të ngjashme.

Në përgjithësi, ne thjesht duam të transferojmë burimet nga dosja e projektit në dosjen e ndërtimit. Por përsëri lind problemi me cache. Për shembull, shfletuesi i cache fotot. Kjo do të thotë se nëse ne ndryshojmë foton, pa ndryshuar emrin e saj të fajllit, atëherë përdoruesit e faqes do të shohin versionin e mëparshëm të fotos, pasi ajo është e cache te ata.

Zgjidhja e problemit, siç e dini tashmë, është shtimi i hash në emrin e fajllit. Webpack lejon kopjimin e fajllave të burimeve në dosjen e ndërtimit, duke u shtuar atyre hash dhe, më e rëndësishmja, duke ndryshuar në të gjitha fajllat shtigjet në këto burime në ato të reja.

Në Webpack puna me asetet kryhet me ndihmën e moduleve të veçanta assets. Ka katër lloje: asset/resource, asset/inline, asset/source, asset.

Moduli asset/resource kopjon fajllat nga dosja e projektit në dosjen e ndërtimit dhe zëvendëson shtigjet në to me të reja. Moduli asset/inline merr fajllat nga dosja e projektit dhe në kodin e ndërtimit zëvendëson shtigjet në fajlla me base64. Moduli asset/source merr fajllat nga dosja e projektit dhe i kthen ato në formën e një vargu tekstual. Moduli asset vetë zgjedh, të kopjojë fajllin në dosjen e ndërtimit apo ta kthejë atë në base. Zgjedhja bëhet në varësi të madhësisë së fajllit. Si parazgjedhje, fajllat më të mëdhenj se 8kb ndërtohen në fajlla.

Skema e përgjithshme e zbatimit të këtyre moduleve duket si më poshtë:

module: {
	rules: [
		{
			test: /\.png$/,        // fajllat
			type: 'asset/resource' // lloji i modulit
		}
	]
},

Shpjegoni, çfarë kuptohet me asete.

Kërkoni në internet, çfarë është base64 dhe si përdoret në CSS.

Listoni 4 llojet e moduleve për asete.

Shpjegoni, për çfarë shërben secili nga 4 llojet e moduleve.