Loaders in Webpack

Om de mogelijkheden van Webpack uit te breiden worden er ook loaders gebruikt. Ze maken het mogelijk om bestanden van een bepaald type te nemen en er specifieke bewerkingen op uit te voeren.

Het is bijvoorbeeld mogelijk om alle bestanden met de extensie .less te nemen, hun tekst om te zetten in CSS, vervolgens de verkregen CSS te minimaliseren en op te slaan in één gemeenschappelijk bestand.

Laten we kijken naar de algemene werking van een loader aan de hand van het voorbeeld van twee denkbeeldige loaders.

Laten we de eerste loader installeren:

npm install test-loader1 --save-dev

Laten we de tweede loader installeren:

npm install test-loader2 --save-dev

Na de installatie van de loaders kunnen we ze gebruiken in het configuratiebestand (ze hoeven niet geïmporteerd te worden). Zie de syntaxis:

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

De elementen van de array kunnen niet in een regel worden geschreven, maar in een kolom:

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

Voor verschillende bestandstypen kunnen verschillende regels worden geschreven:

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 worden in volgorde uitgevoerd. De volgorde begint vanaf het einde van de array. Dat betekent dat de loader die als laatste element in de array is vermeld, als eerste wordt uitgevoerd, dan de voorlaatste, enzovoort.