Webpack'теги Assets

Ар бир долбоордо белгилүү ресурстар же ассеттер (assets) бар. Бул ассеттер сүрөттөр, шрифт файлдары жана ушул сыяктуу нерселер болуп саналат.

Адатта, биз жөн эле ресурстарды долбоор папкасынан куруу папкасына көчүрүп алууну каалайбыз. Бирок, дагы эле кэш менен көйгөй чыгат. Мисалы, браузер сүрөттөрдү кэштейт. Бул биз сүрөттү өзгөртсөк дагы, анын файл атын өзгөртпөсөк, сайттын колдонуучулары сүрөттүн мурдагы версиясын көрүшөт, анткени ал аларда кэштелген болот.

Көйгөйдүн чечими, сиз дагы билесиз, файл атына хеш кошуу болуп саналат. Webpack ресурс файлдарын куруу папкасына көчүрүп, аларга хеш кошуп жана, эң башкысы, бардык файлдардагы бул ресурстарга жолдорду жаңыларына алмаштырууга мүмкүндүк берет.

Webpack'те ассеттер менен иштөө атайын assets-модулдары аркылуу ишке ашат. Алардын төрт түрү бар: asset/resource, asset/inline, asset/source, asset.

asset/resource модулу файлдарды долбоор папкасынан куруу папкасына көчүрөт жаана аларга жолдорду жаңылары менен алмаштырат. asset/inline модулу файлдарды долбоор папкасынан алып, куруу кодуунда файлдарга жолдорду base64 менен алмаштырат. asset/source модулу файлдарды долбоор папкасынан алып, аларды текст сап түрүндө кайтарат. asset модулу өзү чечет, файлды куруу папкасына көчүрүү керекби же аны base кылып айландыруу керекби. Тандоо файлдын көлөмүнө жараша ишке ашат. Демейки боюнча 8kb чоңураак файлдар файлдарга чогултулат.

Бул модулдарды колдонуунун жалпы схемасы төмөнкүдөй көрүнөт:

module: {
	rules: [
		{
			test: /\.png$/,        // файлдар
			type: 'asset/resource' // модул түрү
		}
	]
},

Ассеттер деген эмнени түшүнүшүңүздү айтыңыз.

Base64 деген эмне жана аны CSS'те кантип колдонушканы жөнүндө Google'дан издеңиз.

Ассеттер үчүн модулдардын 4 түрүн санап бериңиз.

4 модул түрүнүн ар биринин максатын айтыңыз.