Loader in Webpack

Um die Möglichkeiten von Webpack zu erweitern, werden ebenfalls Loader verwendet. Sie erlauben es, Dateien eines bestimmten Typs zu nehmen und bestimmte Operationen mit ihnen durchzuführen.

Zum Beispiel kann man alle Dateien mit der Endung .less nehmen, ihren Text in CSS umwandeln, dann den erhaltenen CSS minimieren und in einer gemeinsamen Datei speichern.

Lassen Sie uns das allgemeine Schema der Arbeit mit einem Loader am Beispiel zweier imaginärer Loader ansehen.

Lassen Sie uns den ersten Loader installieren:

npm install test-loader1 --save-dev

Lassen Sie uns den zweiten Loader installieren:

npm install test-loader2 --save-dev

Nach der Installation der Loader können wir sie in der Konfigurationsdatei verwenden (sie müssen nicht importiert werden). Sehen Sie sich die Syntax an:

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

Man kann die Elemente des Arrays nicht in einer Zeile, sondern spaltenweise schreiben:

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

Für verschiedene Dateitypen kann man verschiedene Regeln schreiben:

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

Loader werden nacheinander ausgeführt. Dabei beginnt die Reihe vom Ende des Arrays. Das heißt, zuerst wird der Loader ausgeführt, der als letztes Element des Arrays angegeben ist, dann der vorletzte und so weiter.