Récapitulatif de Webpack et réponses aux questions

Par ccandanedosanchez, 21 mars, 2025

Bonjour et bienvenue dans mon dernier blog ! Merci de prendre le temps de lire sur un sujet qui m’a semblé intéressant au début de la session. Dans ce blog, je souhaite faire un récapitulatif de chaque article que j’ai écrit, pour ceux qui ne les ont pas encore lus et, pour ceux qui l’ont fait, rafraîchir certaines informations. Je vais également répondre à des questions auxquelles je n’ai pas pu répondre immédiatement, en partageant les informations trouvées au fil du temps.

Qu’est-ce que Webpack ?

Dans mon deuxième blog, j’ai abordé les points suivants :

Webpack est un outil qui aide les développeurs à organiser et optimiser leurs fichiers pour des projets web. Il est principalement utilisé pour les fichiers JavaScript, mais peut aussi gérer des fichiers HTML, CSS, images, etc. Voici ce qu’il fait :

  1. Regroupement des fichiers : Webpack prend plusieurs fichiers et les assemble dans un ou plusieurs fichiers plus gros appelés bundles.

  2. Loaders : Ils permettent de transformer les fichiers avant de les regrouper. Par exemple, le loader babel-loader peut convertir du JavaScript moderne (comme ES6) en code compatible avec les anciens navigateurs.

  3. Plugins : Ces outils supplémentaires permettent d’effectuer des tâches comme générer automatiquement un fichier HTML grâce à HtmlWebpackPlugin. Cela vous fait gagner du temps et évite les erreurs manuelles.

  4. Optimisation des performances : Webpack divise le code en morceaux plus petits pour rendre le chargement de vos pages plus rapide.

En résumé : Webpack est indispensable pour organiser et optimiser vos projets web de manière efficace.

Configurer Webpack dans votre projet Web

Dans mon troisième blog, j’ai expliqué comment configurer Webpack étape par étape.

Étape 1 : Création d’un projet appelé webpack-demo

Création du projet :

mkdir webpack-demo

Entrer dans le dossier :

cd webpack-demo

Initialisation de Node.js et création du fichier package.json :

npm init -y

Installation de Webpack et du CLI pour exécuter les commandes :

npm install webpack webpack-cli --save-dev

Exécuter le projet :

npx webpack

Étape 2 : Créer un fichier de configuration

Dans la racine de votre projet, créez un fichier nommé webpack.config.js :

const path = require('path');

module.exports = {
  entry: './src/index.js', // Point d’entrée

  output: {
    filename: 'bundle.js', // Nom du fichier de sortie
    path: path.resolve(__dirname, 'dist'), // Dossier de sortie
  },
};

Pourquoi créer un fichier de configuration ?

Sans fichier de configuration, Webpack fonctionne avec des paramètres par défaut (par ex., ./src/index.js comme point d’entrée). Mais ce fichier est nécessaire si vous voulez :

  • Si tu veux changer le point d’entrée (entry point).
  • Ajouter des plugins ou loaders spécifiques pour optimiser ton projet.

Concepts clés dans un fichier de configuration :

  • Entry (point de départ de votre code).
  • Output (destination du fichier compilé).

Faciliter le développement avec Webpack

Dans mon quatrième blog, j’ai exploré un outil indispensable : webpack-dev-server, qui rend le processus de développement beaucoup plus fluide.

Qu’est-ce que webpack-dev-server ?

C’est un serveur local qui permet d’exécuter votre application directement, tout en offrant des fonctionnalités comme le rechargement automatique.

Installation

npm install --save-dev webpack-dev-server

Configuration

Ajoutez ces lignes dans votre fichier webpack.config.js :

const path = require('path');

module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },

  devServer: {
    static: path.join(__dirname, 'dist'), // Répertoire pour les fichiers statiques
    compress: true, // Activer la compression
    port: 9000, // Port local
    hot: true, // Activation de Hot Module Replacement (HMR)
  },
};

Démarrer le serveur

Pour démarrer le serveur local :

npx webpack serve

Hot Module Replacement (HMR)

HMR permet de visualiser les changements de votre code en temps réel, sans rafraîchir manuellement la page.

Webpack vs Vite

Dans mon cinquième blog, j’ai comparé Webpack avec Vite, un outil moderne et rapide pour le bundling. Vite offre des temps de démarrage incroyablement rapides et utilise ES Modules pour un développement moderne. Cependant, Webpack reste un choix robuste pour les projets complexes nécessitant une forte personnalisation.

Plugins Webpack

Dans mon sixième blog, j’ai parlé des plugins et même expliqué comment créer le vôtre. Voici quelques plugins populaires :

  1. HtmlWebpackPlugin : Génère automatiquement un fichier HTML.
  2. MiniCssExtractPlugin : Extrait le CSS dans des fichiers séparés.
  3. TerserPlugin : Minifie le JavaScript pour réduire la taille des fichiers.
  4. CleanWebpackPlugin : Nettoie les builds précédents.

Voici un exemple d’ajout de plugin :

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Fichier HTML source
      filename: 'index.html', // Fichier généré
    }),
  ],
};

Questions

Certains noms et questions de ce blog ont été modifiés pour respecter la confidentialité.

Question posée par un enseignant

1- Quelles sont les différences principales entre Webpack et Vite ? Vite a gagné beaucoup en popularité ces dernières années, alors quels sont les avantages d'utiliser Webpack à la place de Vite ? Est-ce qu'ils répondent aux mêmes besoins ?

D'après ce que j'ai pu lire dans plusieurs blogs, une différence très notable est la vélocité, avec des temps de compilation plus rapides et HMR quasi instantané comparé à Webpack. Les avantages d'utiliser Webpack est principalement que Webpack se distingue par sa grande capacité de personnalisation grâce à ses loaders et plugins. En plus, il offre des fonctionnalités de tree shaking très performantes ainsi que des stratégies avancées de code splitting, comme les imports dynamiques et le lazy loading, ce qui le rend plus puissant que Vite à ce niveau-là. Vite, bien qu'il propose un tree shaking de base, n'offre pas la même profondeur de personnalisation. En résumé, si vous avez besoin d'un contrôle plus précis sur le processus de bundling et d'une flexibilité maximale dans la configuration et l'optimisation de votre projet, Webpack pourrait être le choix le plus adapté.

Question posée par un étudiant

2- Comment ces plugins se comparent-ils aux équivalents dans Vite?

Pour le contexte, la question demande comment les plugins que j'ai mentionnés dans mon blog 6 se comparent.

Générer un fichier HTML avec l'injection automatique des scripts et CSS:

HtmlWebpackPlugin (Webpack)
Équivalent dans Vite : vite-plugin-html

Réduire la taille des fichiers en éliminant les espaces blancs :

TerserPlugin (Webpack)
Équivalent dans Vite : Cette fonctionnalité est gérée nativement par Vite via esbuild

Référence

Avdhoot : « Vite vs Webpack: Performance Comparison of Modern Build Tools » dans eluminoustechnologies.com, https://eluminoustechnologies.com/blog/vite-vs-webpack/ (page consultée le 21 Mars 2025).

« Installation » dans webpack site officiel, https://webpack.js.org/guides/installation/ (page consultée le 19 Mars 2025).

« Plugins » dans webpack site officiel, https://webpack.js.org/plugins/ (page consultée le 19 Mars 2025).

« Hot Module Replacement » dans webpack site officiel, https://webpack.js.org/guides/hot-module-replacement/ (page consultée le 21 Mars 2025).

« Dev Server » dans webpack site officiel, https://webpack.js.org/configuration/dev-server/ (page consultée le 21 Mars2025).

« Plugins » dans Vite site officiel, https://vite.dev/plugins/ (page consultée le 21 Mars 2025).

Mostafa Said : « Vite vs. Webpack: A Head-to-Head Comparison » dans kinsta.com, https://kinsta.com/blog/vite-vs-webpack/#5-build-time-and-bundle-size (page consultée le 21 Mars 2025).

Nwani Victory : « Getting Started With Webpack » dans smashingmagazine, https://www.smashingmagazine.com/2021/06/getting-started-webpack/ (page consultée le 19 mars 2025).

Nimrod Kramer : « Webpack Basics for Beginners » dans daily.dev, https://daily.dev/blog/webpack-basics-for-beginners (page consultée le 19 Mars 2025).

Commentaires