QuelPack ? Un guide FED sur les mystères de Webpack.

Quel est le problème?

Le développement Web a connu d’innombrables changements au fil des ans et le terme développeur « frontal » s’est élargi pour inclure de nouvelles façons de mettre en page les pages, de nouvelles bibliothèques JavaScript à apprendre et de nouvelles façons de styliser vos créations. Cette complexité s’accompagne de défis sur la façon de tout organiser. Dans un environnement d’équipe d’entreprise, la nécessité d’optimiser pour de nombreux appareils, de savoir où se trouvent les choses et ce qu’elles font est d’une importance vitale.

En tant que bons développeurs, nous divisons notre code en fichiers séparés qui sont liés à des parties de notre site pour faciliter l’édition et la lisibilité, mais nous rencontrons ensuite le problème de savoir comment assembler tout cela de manière maintenable. C’est là qu’intervient Webpack.

Ce que fait Webpack

Webpack au niveau le plus simple est capable de faire n’importe quelle conversion de fichier (transpiling) nécessaire pour que n’importe quel navigateur puisse comprendre et condenser tout ce que vous lui dites dans un seul fichier. Ce serait un fichier javascript, mais nous n’utilisons généralement pas un seul fichier JS, en tant que front-end, nous voulons aussi un fichier CSS ! Plus à ce sujet plus tard.

Comment Webpack est configuré

Webpack est un module Node.js, alors assurez-vous de l’installer d’abord sur votre système ! https://nodejs.org/en/download.

Vous commencez par l’initialiser dans votre répertoire de projet. Lorsque vous initialisez node, un nouveau dossier appelé « node_modules » est créé et tout ce dont Node pourrait avoir besoin y est placé. Cela change lorsque vous installez d’autres choses.

Installer le nœud

npm init -y    // tell node to create needed files and don't ask me questions

Installation de Webpack

Ensuite, nous pouvons installer webpack. Il y a deux parties. Les premiers sont les fichiers de base pour webpack, le second est l’interface de ligne de commande (CLI) dont nous avons besoin pour donner des commandes webpack dans la fenêtre du terminal.

npm install webpack webpack-cli --save-dev

Remarque sur les dépendances
Lors de l’installation de modules, certains peuvent n’être nécessaires que pendant le développement (développement) et d’autres peuvent être nécessaires sur le serveur (production). Pour dire au nœud comment traiter chacun, vous utilisez une option de ligne de commande de -save pour une utilisation en production ou -save-dev pour une utilisation uniquement pour le développement local. Cela sera écrit dans un fichier appelé « package.json » à l’endroit approprié.

Le fichier package.json

Chaque fois que vous installez un module pour la première fois, un fichier appelé package.json est créé dans le dossier racine de votre projet. Cela garde une trace de toutes les dépendances régulières et de développement dont votre application a besoin. Il obtiendra par défaut le dernier de chacun et aura un ^ au début de la version, ce qui signifie qu’elle se mettra à jour automatiquement pour obtenir la dernière version compatible (généralement uniquement mineure). Si vous ne voulez pas que cela se produise, supprimez le caret dès le début.

Un échantillon package.json dossier:

{
  "name": "Webpack5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config webpack.dev.config.js",
    "prod": "webpack --config webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.2",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.7.2",
    "sass": "^1.56.2",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "handlebars": "^4.7.7"
  }
}

Il y a beaucoup de choses déjà installées dans ce package.json fichier et nous passerons en revue certains des plus importants dans les prochaines entrées.

Une forêt d’arbres

Au début, j’ai expliqué que webpack rassemble les choses dans un seul fichier javascript, mais comment ?

La façon dont Webpack sait où trouver les choses est que nous lui disions où trouver un fichier javascript pour lire des instructions supplémentaires. C’est ce qu’on appelle un fichier de configuration. Le fichier « config » donne à webpack l’emplacement de notre ou nos points « d’entrée ». Il s’agit simplement d’un chemin vers un dossier ou un fichier index.js. Si vous ne spécifiez pas de fichier index.js, il essaiera de le trouver par défaut dans le dossier spécifié.

OK, mais comment ça commence à regarder?

De retour dans ça package.json fichier il y a une section appelée « scripts ». Il est généré avec un fichier par défaut, vous pouvez le supprimer.
Bientôt, nous « exécuterons » l’un de ces scripts et c’est ainsi que Webpack démarre.

Ici, nous avons deux scripts qui pointent vers des fichiers de configuration distincts. Juste un avertissement, nous en avons généralement deux afin que vous puissiez faire les choses plus rapidement lorsque vous développez en exécutant « dev », et lorsque vous êtes prêt à produire du code pour le serveur, vous exécutez le script « prod » à la place. Nous y reviendrons plus tard.

 "scripts": { 
     "dev": "webpack --config webpack.dev.config.js", 
     "prod": "webpack --config webpack.prod.config.js" 
  }

Ce que les fichiers de configuration contiendront, ce sont toutes les règles, emplacements et autres paramètres dont Webpack a besoin pour tout collecter dans nos fichiers finaux.

Nous allons configurer les choses pour Webpack pour :

1. lire un fichier de configuration
2. trouver le fichier index.js
3. l’index.js inclura généralement d’autres fichiers comme plus de js, css, sass ou même des images.
4. tout traiter au besoin
5. produire les fichiers finaux dont nous avons besoin dans les formats que nous spécifions
6. profit?

L’ensemble du processus se ramifie du premier index.js à tous les autres fichiers dont il a besoin tout au long de la ligne.

Suivant: Webpack : ça configure