Lastere i Webpack

For å utvide mulighetene til Webpack brukes også lastere. De gjør det mulig å ta filer av en bestemt type og utføre visse operasjoner med dem.

For eksempel kan man ta alle filer med endelsen .less, transformere teksten deres til CSS, deretter minimere den resulterende CSS-en og lagre den i én felles fil.

La oss se på den generelle oppskriften for arbeid med en laster ved å bruke eksempelet på to tenkte lastere.

La oss installere den første lasteren:

npm install test-loader1 --save-dev

La oss installere den andre lasteren:

npm install test-loader2 --save-dev

Etter installasjon av lastere kan vi bruke dem i konfigurasjonsfilen (du trenger ikke å importere dem). Se syntaksen:

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

Elementene i arrayet kan skrives ikke på rad, men i kolonne:

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

For forskjellige filtyper kan man skrive forskjellige 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'
				],
			},
		],
	},
};

Lastere utføres i rekkefølge. Der starter rekkefølgen fra slutten av arrayet. Det vil si at den første lasteren som utføres, er den som er angitt som det siste elementet i arrayet, deretter den nest siste, og så videre.