Webpack Loaderi

Lai paplašinātu Webpack iespējas, tiek izmantoti arī loaderi. Tie ļauj paņemt noteikta tipa failus un veikt ar tiem noteiktas darbības.

Piemēram, var paņemt visus failus ar paplašinājumu .less, pārveidot to tekstu par CSS, pēc tam iegūto CSS minimizēt un saglabāt vienā kopīgā failā.

Apskatīsim vispārējo shēmu darbam ar loaderiem, izmantojot divus iedomātus loaderus kā piemēru.

Instalēsim pirmo loader:

npm install test-loader1 --save-dev

Instalēsim otro loader:

npm install test-loader2 --save-dev

Pēc loaderu instalēšanas mēs varam tos izmantot konfigurācijas failā (tos nav nepieciešams importēt). Skatieties sintaksi:

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

Masīva elementus var rakstīt nevis rindā, bet kolonnā:

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

Dažādiem failu tipiem var rakstīt dažādus noteikumus:

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

Loaderi tiek izpildīti pēc kārtas. Šī kārta sākas no masīva beigām. Tas ir, vispirms tiek izpildīts loaders, kas norādīts kā pēdējais masīva elements, tad priekšpēdējais un tā tālāk.