Assets-ები Webpack-ში

ყველა პროექტში არის გარკვეული რესურსები ან ასეტები (assets). ეს ასეტები არის სურათები, ფონტების ფაილები და მსგავსი რამ.

როგორც წესი, ჩვენ გვსურს უბრალოდ გადავიტანოთ რესურსები პროექტის საქაღალდიდან აწყობის საქაღალდეში. მაგრამ აქაც ჩნდება ქეშის პრობლემა. მაგალითად, ბრაუზერი ქეშირებს სურათებს. ეს ნიშნავს, რომ თუ ჩვენ შევცვლით სურათს, მაგრამ არ შევცვლით მისი ფაილის სახელს, მომხმარებლები საიტზე დაინახავენ სურათის წინა ვერსიას, რადგან ის მათთან დაქეშებულია.

პრობლემის გადაწყვეტა, როგორც უკვე იცით, არის ჰეშის დამატება ფაილის სახელში. Webpack საშუალებას აძლევს დააკოპიროთ რესურსების ფაილები აწყობის საქაღალდეში, დაუმატოთ მათ ჰეში და, რაც მთავარია, შეცვალოთ ყველა ფაილში ამ რესურსების ბმულები ახალებზე.

Webpack-ში ასეტებთან მუშაობა ხორციელდება სპეციალური assets-მოდულების საშუალებით. მათი ოთხი ტიპია: asset/resource, asset/inline, asset/source, asset.

მოდული asset/resource აკოპირებს ფაილებს პროექტის საქაღალდიდან აწყობის საქაღალდეში და ცვლის ბმულებს მათზე ახალებზე. მოდული asset/inline იღებს ფაილებს პროექტის საქაღალდიდან და აწყობის კოდში ფაილების ბმულებს ცვლის base64-ზე. მოდული asset/source იღებს ფაილებს პროექტის საქაღალდიდან და აბრუნებს მათ ტექსტური სტრიქონის სახით. მოდული asset თავად ირჩევს, დააკოპიროს ფაილი აწყობის საქაღალდეში თუ გარდაქმნას ის base64-ში. არჩევანი ხდება ფაილის ზომის მიხედვით. ნაგულისხმევად, ფაილები 8kb-ზე მეტი იკრიბება ფაილებად.

ამ მოდულების გამოყენების ზოგადი სქემა ასე გამოიყურება:

module: {
	rules: [
		{
			test: /\.png$/,        // ფაილები
			type: 'asset/resource' // მოდულის ტიპი
		}
	]
},

ახსენით, რა იგულისხმება ასეტებში.

გაეცანით, რა არის base64 და როგორ იყენებენ მას CSS-ში.

ჩამოწერეთ ასეტების მოდულების 4 ტიპი.

ახსენით, რისთვისაა განკუთვნილი თითოეული 4 მოდულის ტიპიდან.