Loaders katika Webpack

Ili kupanua uwezo wa Webpack pia hutumika loaders. Zinawezesha kuchukua faili za aina fulani na kufanya operesheni fulani nazo.

Kwa mfano, unaweza kuchukua faili zote zenye kiambishi .less, kubadilisha maandishi yake kuwa CSS, kisha CSS iliyopatikana kupunguzwa na kuhifadhiwa kwenye faili moja ya jumla.

Wacha tuangalie mpango wa jumla wa kufanya kazi na loader kwa kutumia mfano wa loaders mbili za kubuni.

Wacha tusakinishe loader ya kwanza:

npm install test-loader1 --save-dev

Wacha tusakinishe loader ya pili:

npm install test-loader2 --save-dev

Baada ya kusakinisha loaders tunaweza kuzitumia kwenye faili ya usanidi (haihitaji kuagizwa). Angalia sintaksia:

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

Vipengele vya safu vinaweza kuandikwa sio kwenye mstari, lakini kwenye safu wima:

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

Kwa aina tofauti za faili unaweza kuandika kanuni tofauti:

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

Loaders hufanyika kwa mpangilio. Huku foleni ikianza kutoka mwisho wa safu. Yaani kwanza hutekelezwa loader, iliyoonyeshwa na kipengele cha mwisho cha safu, kisha cha mwisho wa pili na kadhalika.