Loaders dans Webpack

Pour étendre les capacités de Webpack, on utilise également des loaders. Ils permettent de prendre des fichiers d'un type spécifique et d'effectuer sur eux des opérations spécifiques.

Par exemple, on peut prendre tous les fichiers avec l'extension .less, transformer leur texte en CSS, puis minimiser le CSS obtenu et le sauvegarder dans un fichier commun.

Regardons le schéma général de travail avec un loader sur l'exemple de deux loaders imaginaires.

Installons le premier loader :

npm install test-loader1 --save-dev

Installons le deuxième loader :

npm install test-loader2 --save-dev

Après l'installation des loaders, nous pouvons les utiliser dans le fichier de configuration (inutile de les importer). Voir la syntaxe :

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

On peut écrire les éléments du tableau non pas sur une ligne, mais en colonne :

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

Pour différents types de fichiers, on peut écrire différentes règles :

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

Les loaders s'exécutent séquentiellement. La séquence commence par la fin du tableau. C'est-à-dire que le premier loader à s'exécuter est celui indiqué comme dernier élément du tableau, puis l'avant-dernier et ainsi de suite.