Hello ! Tout à fait, j'aimerais utiliser Webpack pour compiler et bundler (packager) mes codes. Super comme projet. Mais pourquoi cette volonté d'utiliser Webpack ?
J'ai vu ça un peu partout sur le web...C'est vrai que Webpack est un outil très utilisé par les développeurs frontend. Il permet d'optimiser le code en gérant les dépendances, d'utiliser des frameworks ou encore d'utiliser des loaders pour les différentes technologies que l'on peut être amené à utiliser (vue, SASS, LESS...).
Oula, des dépendances, comment ça ? Imaginons le projet suivant :
Et le code suivant :
{"language":"text/html","content":"<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n\t<meta charset=\"utf-8\">\n\t<title>Exemple de code basique</title>\n</head>\n<body>\n\t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/voca/1.4.0/voca.min.js\"></script>\n\t<script src=\"./src/index.js\"></script>\n</body>\n</html>","filename":"index.html"}
{"language":"text/javascript","content":"const monTexte = v.camelCase('Time is running out')\ndocument.body.textContent = monTexte","filename":"index.js"}
C'est quoi v.camelCase() ? C'est une fonction disponible avec Voca [vocajs]. Voca est une librairie qui offre plein de fonctions pour gérer les chaines de caractères. C'est très pratique. Je m'en suis servi ici comme un exemple.
Ok ! Mais ton histoire de dépendance ? En fait ici notre index.js a besoin du script qu'on insère juste au dessus dans index.html : le CDN de Voca. Sans ce script, on n'aurait pas accès à l'objet "v" dans lequel il y a les méthodes de Voca. Le problème ici c'est que :
- Si l'on regarde uniquement index.js, on ne comprend absolument pas qu'on a besoin de faire appel au CDN de Voca.
- Si on importe mal Voca ou dans le mauvais sens, rien ne fonctionne. Par exemple : {"language":"text/html","content":"<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n\t<meta charset=\"utf-8\">\n\t<title>Exemple de code basique</title>\n\t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/voca/1.4.0/voca.min.js\" defer></script>\n</head>\n<body>\n\t<script src=\"./src/index.js\"></script>\n</body>\n</html>","filename":"index.html"}
- Si pour éviter le problème ci-dessus on insère dans notre page tous les scripts externes (CDN par exemple) dont notre application a besoin mais pas la page actuelle, on aura un temps de chargement largement plus long.
Bref, ce n'est donc pas maintenable à longue échelle. Webpack nous permet d'éviter ce soucis en "packageant" le code.
Je comprends mieux maintenant. Alors, comment on fait pour utiliser webpack ? Pour utiliser webpack, il va falloir que tu aies npm d'installé. Tu peux aussi travailler avec Yarn si tu le préfères (un autre gestionnaire de dépendances JS) mais les exemples que je présenterai seront réalisés avec npm.
J'ai npm d'installé ! Installation
Nous allons donc utiliser npm pour installer webpack. Commence par créer un nouveau répertoire où tu le désires :
{"language":"shell","content":"mkdir tuto-webpack","filename":""}
Ensuite, on initialise npm :
{"language":"shell","content":"cd tuto-webpack && npm init","filename":""}
Enfin, on installe webpack :
{"language":"shell","content":"npm install --save-dev webpack","filename":""}
Et c'est tout ?Pas exactement. Vu qu'on utilise Webpack v5, on doit aussi installer Webpack-cli :
{"language":"shell","content":"npm install --save-dev webpack-cli","filename":""}
Et voilà !
Mise en place
On va reprendre notre code précédent mais on va changer un peu la structure. On va mettre index.html dans un dossier appelé "dist". On va le modifier un peu pour pouvoir utiliser les fichiers générés par Webpack par la suite :
{"language":"text/html","content":"<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n\t<meta charset=\"utf-8\">\n\t<title>Exemple de code basique</title>\n</head>\n<body>\n\t<script src=\"main.js\"></script>\n</body>\n</html>","filename":"index.html"}
Mais il est passé où le CDN de Voca ? Au lieu de faire appel à son CDN, on va l'installer avec npm pour l'importer directement dans notre index.js
{"language":"shell","content":"npm install voca","filename":""}
Et donc on va modifier index.js en conséquence :
{"language":"text/javascript","content":"const v = require('voca')\nconst monTexte = v.camelCase('Time is running out')\ndocument.body.textContent = monTexte","filename":"index.js"}
C'est beaucoup plus clair, c'est vrai qu'on remarque tout de suite que ce script nécessite Voca ! Tout à fait. On a donc maintenant la structure suivante :
J'ai la même.Alors maintenant laissons la magie opérer grâce à webpack. On tape directement dans la console :
{"language":"shell","content":"npx webpack","filename":""}
Maintenant regarde dans le dossier dist : un fichier main.js est apparu. Tu as aussi un fichier main.js.LICENSE.txt qui contient des "licenses" directement inscrites par les librairies utilisées. C'est automatique. Tu peux consulter le fichier main.js à ta guise, remarquer que :
- Le code qu'on a écrit arrive à la fin du fichier
- Le code de Voca est directement intégré
- Tout est minifié
C'est cool en effet. Mais quelque chose me "turlupine". La structure de notre projet devra toujours être celle là ? Et je devrai toujours avoir un index.js, pas un autre nom ? Non, heureusement on peut configurer Webpack autrement. C'est ce que nous verrons dans la suite du cours par ailleurs. Il y a aussi une autre chose qui peut être bien, c'est de créer un script plutôt que de taper directement npx webpack.
Créer un script ? Mais je le mets où ?Lorsqu'on fait "npm init", un fichier package.json est créé avec un objet "scripts". Il contient déjà un script nommé test. Il suffit d'en écrire un nouveau ici-même. Le script est donné par la documentation officielle de webpack :
{"language":"text/javascript","content":"\"build\":\"webpack --config webpack.config.js\"","filename":""}
Du coup le fichier package.json devrait ressembler à ça :
{"language":"text/javascript","content":"{\n \"name\": \"tuto-webpack\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \"Error: no test specified\" && exit 1\",\n \"build\": \"webpack --config webpack.config.js\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"webpack\": \"^5.13.0\",\n \"webpack-cli\": \"^4.3.1\"\n }\n}","filename":""}
En effet, j'ai quelque chose de très similaire. En tout cas pour les scripts, c'est pareil ! Parfait, on peut donc continuer. Comme tu peux le voir, il y a aussi un attribut "main". C'est le point d'entrée de notre application. On va enlever cette ligne car c'est par la suite webpack qui gèrera les points d'entrée.
{"language":"text/javascript","content":"{\n \"name\": \"tuto-webpack\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"scripts\": {\n \"test\": \"echo \"Error: no test specified\" && exit 1\",\n \"build\": \"webpack --config webpack.config.js\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"webpack\": \"^5.13.0\",\n \"webpack-cli\": \"^4.3.1\"\n }\n}","filename":""}
Fichier de configuration
Bon, peut être que tu l'auras remarqué : notre script fait appel à un fichier webpack.config.js. Nous devons donc le créer à la racine de notre dossier tuto-webpack. Tu peux le faire à la main ou utiliser la commande touch (ça te permet de voir quelques commandes comme ça).
{"language":"shell","content":"touch webpack.config.js","filename":""}
Maintenant, pour compiler notre JS, on n'a plus besoin d'écrire npx webpack mais npm run build, c'est à dire "npm run" suivi du nom du script.
{"language":"shell","content":"npm run build","filename":""}
Le résultat est le même, mais c'est plus propre de faire comme ça.
Bon, maintenant, on va rentrer dans la configuration de Webpack. On va pouvoir préciser le mode de compilation, le point d'entrée, de sortie... Tu es prêt ?
Je suis prêt, on y va.Juste avant un petit point de vocabulaire :
- En dev, en mode dev : générer du code qu'on utilisera en local pour nos tests
- En prod ou en production : générer du code qu'on utilisera en ligne, pour le site terminé
C'est compris ! J'ai terminé cette partie