Loadere i Webpack

For at udvide Webpacks muligheder bruges også loadere. De tillader at tage filer af en bestemt type og udføre bestemte operationer med dem.

For eksempel kan man tage alle filer med endingen .less, transformere deres tekst til CSS, derefter minimere den resulterende CSS og gemme i én fælles fil.

Lad os se på den generelle skema for arbejde med en loader ved hjælp af eksemplet med to imaginære loadere.

Lad os installere den første loader:

npm install test-loader1 --save-dev

Lad os installere den anden loader:

npm install test-loader2 --save-dev

Efter installation af loadere kan vi bruge dem i konfigurationsfilen (vi behøver ikke at importere dem). Se syntaksen:

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

Elementerne i arrayet kan skrives ikke på én linje, men i en kolonne:

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

For forskellige filtyper kan man skrive forskellige regler:

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

Loadere udføres i rækkefølge. Her starter rækkefølgen fra slutningen af arrayet. Det vil sige, at den første loader, der udføres, er den, der er angivet som det sidste element i arrayet, derefter den næstsidste og så videre.