Assets Webpack'e

Kiekviename projekte yra tam tikri ištekliai arba asset'ai (assets). Šie asset'ai yra paveikslėliai, šriftų failai ir panašūs daiktai.

Paprastai mes tiesiog norime perkelti isteklius iš projekto aplanko į surinkimo aplanką. Bet vėl iškila talpyklos problema. Pavyzdžiui, naršyklė talpina paveikslėlius. Tai reiškia, kad jei pakeisime vaizdą paveikslėlyje, nepakeitę jo failo pavadinimo, tada svetainės naudotojai pamatys ankstesnę paveikslėlio versiją, nes ji jiems buvo patalpinta į talpyklą.

Problemos sprendimas, kaip jau žinote, yra maišos pridėjimas prie failo pavadinimo. Webpack leidžia kopijuoti išteklių failus į surinkimo aplanką, pridedant prie jų maišas ir, svarbiausia, keičiant visuose failuose kelius į šiuos išteklius į naujus.

Webpack'e darbas su asset'ai vykdomas naudojant specialius asset modulius. Jų yra keturi tipai: asset/resource, asset/inline, asset/source, asset.

Modulis asset/resource kopijuoja failus iš projekto aplanko į surinkimo aplanką ir pakeičia kelius į juos naujais. Modulis asset/inline paima failus iš projekto aplanko ir surinkimo kode pakeičia kelius į failus į base64. Modulis asset/source paima failus iš projekto aplanko ir grąžina juos tekstinės eilutės pavidalu. Modulis asset pats pasirenka, kopijuoti failą į surinkimo aplanką ar paversti jį į base. Pasirinkimas atliekamas priklausomai nuo failo dydžio. Pagal nutylėjimą failai didesni nei 8kb renkami į failus.

Bendra šių modulių taikymo schema atrodo taip:

module: {
	rules: [
		{
			test: /\.png$/,        // failai
			type: 'asset/resource' // modulio tipas
		}
	]
},

Paaiškinkite, kas suprantama pod asset'ais.

Paieškokite, kas yra base64 ir kaip jis naudojamas CSS'e.

Išvardykite 4 asset modulių tipus.

Paaiškinkite, kam skirti kiekvienas iš 4-ų modulių tipų.