Webpack-da Assetler

Her bir taslamada käbir çeşmeler ýa-da assetler (assets) bar. Bu assetler suratlar, şrift faýllary we şuňa meňzeş zatlar.

Adatça, biz diňe taslamanyň papkasydan çeşmeleri ýygnaýyş papkasyna geçirmek isleýäris. Ýöne ýene bir gezek keş problemasy peýda bolýar. Mysal üçin, brauzer suratlary keşe alýar. Bu ýagdaýda, biz surady üýtgetsek, onyň faýl adyny üýtgetmezden, web sahypasynyň ulanjylary öňki wersiýany görer, sebäbi olaryň brauzerinde keşe alyndy.

Problemany çözmek üçin, siz eýýäm bilýäňiz ýaly, faýl adyna heş goşmak ýardam edýär. Webpack asset faýllaryny ýygnaýyş papkasyna göçürmäge, olara heş goşmaga we, iň başy, bu assetlere ähli ýollary ýokary faýllarda täzelere çalyşmaga mümkinçilik berýär.

Webpack-da assetler bilen iş asset modullary arkaly amala aşyrylýar. Olar dört görnüşlidir: asset/resource, asset/inline, asset/source, asset.

asset/resource moduly taslamanyň papkasyndan faýllary ýygnaýyş papkasyna göçürýär we olara çykmak ýollaryny täzeleri bilen çalşyrýar. asset/inline moduly taslamanyň papkasyndan faýllary alýar we ýygnaýyş kodunda faýl ýollaryny base64 bilen çalşyrýar. asset/source moduly taslamanyň papkasyndan faýllary alýar we olary tekst setiri hökmünde gaýtarýar. asset moduly özi saýlaýar, faýly ýygnaýyş papkasyna göçürmeli ýa-da ony base öwürmeli. Saýlaw faýlyň ölçegine baglylykda amala aşyrylýar. Bellenen ýagda, faýllar 8kb-dan uly bolsa faýllar hökmünde ýygnalýar.

Bu modullary ulanmagyň umumy şemasy aşakdaky ýaly görünýär:

module: {
	rules: [
		{
			test: /\.png$/,        // faýllar
			type: 'asset/resource' // modulyň görnüşi
		}
	]
},

Asset diýen söz nämäni aňladýandygyny düşündiriň.

Guglaň, base64 näme we ony CSS-de nähili ulanýandygyny.

Assetler üçin 4 sany modulyň görnüşini sanap beriň.

4 sany modulyň görnüşiniň her biriniň näme üçin niýetlendigini düşündiriň.