# Séance 4

[Webpack](https://webpack.js.org/) est un automatiseur (ou encore *module bundler)* de tâches, pour le "front", qui vous permet de fusionner plusieurs fichiers CSS, plusieurs fichiers javascript, de minifier le JS ou le CSS, de transformer du code typeScript, Ecmas, ... en du javascript compréhensible par tous les navigateurs, de compiler du SCC/SASS en du CSS, ...

{% hint style="info" %}
Pour fonctionner, vous devez avoir [NodeJs](https://nodejs.org/en/) d'installé sur votre serveur (ou dans votre environnement de travail)
{% endhint %}

## Principe de fonctionnement

![Image d'illustration du fonctionnement de Webpack (source site webpack)](https://472912620-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSl4NYgztlnU5U8_iKk%2F-MVAN_bsLVikgRVkIPyS%2F-MVAOeiMq3Qz0Z0gQDIl%2FCapture%20d%E2%80%99e%CC%81cran%202021-03-07%20a%CC%80%2007.35.52.png?alt=media\&token=e2c7af6d-ba03-4822-bc54-1381513555d2)

Comme le montre le schéma ci-dessus, l'intérêt de Webpack est de prendre tous les éléments de votre projet (avec les dépendances, les différents formats, ...) et de les préparer, compiler, optimiser pour vous donner en sortie, les formats standards pour les navigateurs (JS, CSS, et images).

## Première mise en place

### Pré-requis

Installer NodeJs (version 10.13 minimum). Pour vous en assurer

```
node -v
```

Normalement NPM est installé automatiquement avec NodeJS (mais vous pouvez aussi utiliser Yarn)

```
npm -v
```

Si votre projet n'est pas encore gérer avec npm (vous n'avez pas de gestion de dépendance, et donc pas de package.json à la racine de votre projet), vous devez initialiser votre répertoire

```
cd votreProjet
npm init
```

Et ensuite installer Webpack :

```
npm install webpack webpack-cli --save-dev
```

L'idée est ensuite d'avoir un fichier qui va regrouper toutes les dépendances (souvent nommé index.js ou app.js), c'est ce fichier que WebPack utilisera pour "comprendre" votre projet.

### Première utilisation

Pour une première mise en place, on peut se baser sur le guide officiel ici : <https://webpack.js.org/guides/getting-started/>

Dans ce guide vous trouverez comment mettre en place le fichier de configuration de webpack (webpack.config.js) qui sera l'élément principal de la configuration.

### Et ensuite ?

A ce stade de la configuration Webpack ne gère pas encore beaucoup de choses. Uniquement le JS, mais sans minification, pas de CSS, ...

Il va donc falloir ajouter les règles (des loaders) pour les différents éléments que vous souhaitez gérer.

#### CSS

{% embed url="<https://webpack.js.org/guides/asset-management/#loading-css>" %}

Et la minification du CSS

{% embed url="<https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production>" %}

Si vous travailler avec du SASS/SCSS, il vous faudra expliquer à webpack comment le compiler en du CSS :

{% embed url="<https://webpack.js.org/loaders/sass-loader/>" %}

Vous pouvez gérer de la même manière vos images, vos polices, ...

## Quelques ressources

Configuration d'un projet complet avec Webpack 5

{% embed url="<https://www.youtube.com/watch?v=TOb1c39m64A>" %}

Un autre tuto, écrit et pas à pas :&#x20;

{% embed url="<https://www.valentinog.com/blog/webpack/>" %}

Une série de tutos sur Webpack 4 en français

{% embed url="<https://grafikart.fr/formations/webpack>" %}

{% hint style="danger" %}
Attention cette série de vidéo est faite avec Webpack 4. Il peut y avoir des changements plus ou moins importants avec Webpack 5. (voir ici : <https://webpack.js.org/migrate/5/>)
{% endhint %}

## Alternatives à Webpack

Webpack est sans doute la solution la plus connue actuellement, mais aussi probablement la plus complexe (parce que très complète).

Avant Webpack, beaucoup d'autres solutions existaient, et vous pourrez rencontrer par exemple :&#x20;

{% embed url="<https://parceljs.org/>" %}

{% embed url="<https://gulpjs.com/>" %}

{% embed url="<https://gruntjs.com/>" %}

Chacun apportant son interprétation et sa complexité, mais répondant généralement parfaitement aux besoins basiques (compressions, fusion, traduction de code).