Bonjour !

On se retrouve aujourd’hui pour un petit article pour ceux qui débutent en Webpack. On va ici parler des loaders Webpack et prendre l’exemple de la compilation sass.

Qu’est-ce qu’un loader ?

Un loader, est un programme qui va permettre à Webpack de pouvoir gérer un certain type de fichier. Par défaut, Webpack ne comprend nativement que le javascript. Avec les loaders, vous allez pouvoir rendre Webpack plus “intelligent” et ainsi pouvoir gérer pleins de types de fichiers et les rajouter ainsi à votre bundle final. A noter que certains loaders permettent d’effectuer des actions qui ne relèvent pas de la transformation ou de la compilation de code comme par exemple des loaders qui permettent de prendre en charge un certain type de fichier et d’injecter le contenu dans un fichier en particulier.

L’exemple avec Sass

Si vous n’utilisez pas encore Sass, je ne peux que vous le conseiller. Sass est un langage qui permet d’écrire du code css de façons beaucoup plus efficace et flexible en ajoutant par exemple des concepts de variables, de boucles, de fonctions…
Il se trouve que Sass a été développé à la base en Ruby et en Dart mais sa popularité l’a vite rendu indispensable en dehors de ces deux mondes. Ainsi, il existe un portage pour nodejs appelé node-sass.

Nous avons donc besoin naturellement d’un loader qui nous permette de transformer notre sass en css. Pour cela il va nous falloir un loader sass, nous allons utiliser celui qui s’appelle sass-loader. A noter que sass-loader va avoir besoin de node-sass pour fonctionner.

> npm install --save-dev node-sass sass-loader

Une fois ceci installé, il vous reste à ajouter dans votre configuration Webpack (webpack.config.js) une règle pour les fichiers .scss:

module: {

	rules: [
		{ test: /\.scss?$/, exclude: /node_modules/, loader: ["sass-loader"] }
	]

},

Nous avons simplement indiqué ici à Webpack que lorsqu’il rencontre un fichier de type scss qui est un fichier sass, il doit utiliser le loader sass-loader afin de pouvoir gérer ce type de fichier.
Une fois ceci réalisé, nous nous retrouvons donc avec du css. Malheureusement, Webpack ne comprend pas nativement le css ! Il nous faut donc un loader css :

> npm install --save-dev css-loader

Et l’ajouter ensuite dans notre configuration Webpack :

module: {

	rules: [
		{ test: /\.scss?$/, exclude: /node_modules/, loader: ["css-loader", "sass-loader"] }
	]

},

A noter que l’ordre des loaders lorsqu’ils s’imbriquent comme ici est très important. Dans le tableau, vous devez mettre en premier le loader qui sera exécuté en dernier ! Le sens d’exécution des loaders est donc de droite à gauche.

Bien, nous avons notre css qui est désormais compris et géré par Webpack.
A partir d’ici, vous pouvez l’importer dans vos fichiers javascript. Cependant, cette façon de faire n’est pas la plus pratique, et on préférera souvent avoir une seule inclusion de tout notre code css dans une balise <script> située dans notre fichier index.html. Et devinez quoi ? il y a un loader pour ça et il s’appelle style-loader:

> npm install --save-dev style-loader

Nous n’avons plus qu’à l’ajouter à notre tableau de loader :

module: {

	rules: [
		{ test: /\.scss?$/, exclude: /node_modules/, loader: ["style-loader", "css-loader", "sass-loader"] }
	]

},

Nous l’ajoutons évidemment en première position car nous voulons injecter du css et non du sass dans notre fichier index.

Et voilà le travail !

Happy Coding !