Webpack-тегі assets

Әрбір жобада белгілі бір ресурстар немесе 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 деген не екенін түсіндіріңіз.

Base64 деген не және оны CSS-те қалай қолданатынын іздеп көріңіз.

Assets үшін модульдердің 4 түрін санаңыз.

4 модуль түрінің әрқайсысының не үшін арналғанын түсіндіріңіз.