Assets katika Webpack

Kila mradi una baadhi ya rasilimali au assets (assets). Hizi assets zinawakilisha picha, faili za herufi na mambo kama hayo.

Kwa kawaida, tunataka tu kuhamisha rasilimali kutoka kwa folda ya mradi hadi kwenye folda ya kusanyiko. Lakini tena tatizo la kache linajitokeza. Kwa mfano, kivinjari huhifadhi picha kwenye kache. Hii inamaanisha kuwa ikiwa tutabadilisha picha, bila kubadilisha jina la faili yake, basi watumiaji wavuti wataona toleo la awali la picha, kwani imehifadhiwa kwenye kache kwao.

Suluhisho la tatizo, kama unavyojua, ni kuongeza hash kwenye jina la faili. Webpack inaruhusu kunakili faili za rasilimali kwenye folda ya kusanyiko, ikiwaongezea hash na, muhimu zaidi, kubadilisha katika faili zote anuwai kwa hizi rasilimali kuwa mpya.

Katika Webpack kufanya kazi na assets kunafanyika kwa kutumia moduli maalum za assets. Kuna aina nne: asset/resource, asset/inline, asset/source, asset.

Moduli asset/resource hunakili faili kutoka kwa folda ya mradi hadi kwenye folda ya kusanyiko na hubadilisha anuwai kwa hizo kuwa mpya. Moduli asset/inline huchukua faili kutoka kwa folda ya mradi na katika msimbo wa kusanyiko hubadilisha anuwai kwa faili kuwa base64. Moduli asset/source huchukua faili kutoka kwa folda ya mradi na hurudisha kwa mfumo wa mfuatano wa maandishi. Moduli asset huchagua yenyewe, kunakili faili kwenye folda ya kusanyiko au kuibadilisha kuwa base. Uchaguzi unafanywa kulingana na ukubwa wa faili. Kwa chaguo-msingi faili zaidi ya 8kb husanywa kuwa faili.

Mpango wa jumla wa utumiaji wa moduli hizi unaonekana kama ifuatavyo:

module: {
	rules: [
		{
			test: /\.png$/,        // faili
			type: 'asset/resource' // aina ya moduli
		}
	]
},

Eleza, ni nini kinachoeleweka chini ya assets.

Tafuta kwenye wavuti, base64 ni nini na jinsi gani inatumika katika CSS.

Orodhesha 4 aina za moduli za assets.

Eleza, kwa nini kila moja ya aina 4 za moduli zimeundwa.