Assets дар Webpack

Дар ҳар як лоиҳа баъзе сарчашмаҳо ё assets (assets) мавҷуданд. Ин assets тасвирҳо, файлҳои ҳарф ва ғайраро ифода мекунанд.

Одатан, мо мехоҳем танҳо сарчашмаҳоро аз ҷузви лоиҳа ба ҷузви сохт интиқол диҳем. Аммо боз мушкили кеш пайдо мешавад. Масалан, браузер тасвирҳоро кеш мекунад. Ин маънои онро дорад, ки агар мо тасвирро тағир диҳем, бе он ки номи файлашро тағир диҳем, пас корбарони сомона тасвири қаблиро хоҳанд дид, зеро он дар назди онҳо кеш шудааст.

Ҳалли мушкил, чун ки шумо аллакай медонед, илова кардани хеш ба номи файл мебошад. Webpack имкон медиҳад, ки файлҳои сарчашмаро ба ҷузви сохт нусхабардорӣ кунед, ҳангоми ин кор ба онҳо хеш илова кунед ва, аз ҳама муҳимтар, дар ҳама файлҳо роҳҳо ба ин сарчашмаҳо ба навҳо иваз кунед.

Дар Webpack кор бо assets бо ёрии модулҳои махсуси 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' // навъи модул
		}
	]
},

Дар бораи он чӣ ба assets ишора мекунад, нақл кунед.

Дар Google ҷустӯ кунед, ки base64 чист ва чӣ тавр онро дар CSS истифода мебаранд.

4 навъи модулҳоро барои assets номбар кунед.

Дар бораи он ки ҳар яке аз 4 навъи модулҳо барои чӣ пешбинӣ шудааст, нақл кунед.