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'
				],
			},
		],
	},
};

Լոադերները կատարվում են հերթականությամբ։ Այդ դեպքում հերթը սկսվում է զանգվածի վերջից։ Այսինքն առաջինը կատարվում է այն լոադերը, որը նշված է զանգվածի վերջին տարրով, ապա նախավերջինը և այդպես շարունակ։