ლოადერები Webpack-ში

Webpack-ის შესაძლებლობების გასაფართოვებლად ასევე გამოიყენება ლოადერები. ისინი საშუალებას აძლევს აიღონ გარკვეული ტიპის ფაილები და შეასრულონ მათზე გარკვეული ოპერაციები.

მაგალითად, შესაძლებელია აიღოთ ყველა ფაილი გაფართოებით .less, გადააქციოთ მათი ტექსტი CSS-ად, შემდეგ მიღებული CSS მინიმიზირება და შეინახოთ ერთ საერთო ფაილში.

მოდით შევხედოთ ლოადერთან მუშაობის ზოგად სქემას ორი წარმოსახვითი ლოადერის მაგალითზე.

მოდით დავაინსტალიროთ პირველი ლოადერი:

npm install test-loader1 --save-dev

მოდით დავაინსტალიროთ მეორე ლოადერი:

npm install test-loader2 --save-dev

ლოადერების ინსტალაციის შემდეგ ჩვენ შეგვიძლია გამოვიყენოთ ისინი კონფიგურაციის ფაილში (მათი იმპორტირება არ არის საჭირო). ნახეთ სინტაქსი:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i, // ფაილის ტიპი
				use: ['test-loader1', 'test-loader2'], // ლოადერები
			},
		],
	},
};

მასივის ელემენტები შესაძლებელია ჩაიწეროს არა ხაზში, არამედ სვეტში:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [
					'test-loader1',
					'test-loader2'
				],
			},
		],
	},
};

სხვადასხვა ტიპის ფაილებისთვის შესაძლებელია დაიწეროს სხვადასხვა წესები:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.sass$/i,
				use: [
					'test-loader1',
					'test-loader2'
				],
			},
			{
				test: /\.less$/i,
				use: [
					'test-loader3',
					'test-loader4'
				],
			},
		],
	},
};

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