Qu'est-ce que Webpack et à quoi sert-il?

Webpack est un empaqueteur de modules statique pour les applications JavaScript modernes. Il traite les fichiers de votre projet (modules) et les assemble en un ou plusieurs bundles utilisables dans le navigateur.

Les principales tâches et avantages de Webpack :

• Construction de modules : Combine toutes les dépendances du projet (JavaScript, CSS, images, etc.) en fichiers optimisés. Cela permet une approche modulaire dans le développement.
• Transpilation et polyfills : Avec des loaders, il peut transformer le JavaScript moderne (ES6+) en standards plus anciens (ES5), compréhensibles par la majorité des navigateurs, et ajouter des polyfills pour supporter de nouvelles API.
• Gestion des ressources : Peut traiter non seulement JavaScript, mais aussi d'autres types de fichiers, comme CSS (via css-loader, style-loader), images (asset/resource), polices, etc., en les incluant dans le bundle ou en créant des fichiers séparés.
• Optimisation : Offre plusieurs plugins pour réduire la taille du bundle, comme la minification, la compression, la suppression de code inutilisé (tree shaking).
• Division du code (Code Splitting) : Permet de diviser le bundle en parties plus petites qui se chargent à la demande, accélérant le chargement initial de l'application.
• Rechargement à chaud (Hot Module Replacement - HMR) : Permet de mettre à jour les modules dans une application en cours d'exécution sans recharger toute la page, ce qui accélère considérablement le développement.
• Gestion des dépendances : Aide à gérer efficacement le graphe complexe des dépendances du projet.

Exemple de configuration de base (fichier webpack.config.js) :

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Point d'entrée
  output: {
    filename: 'bundle.js', // Nom du bundle de sortie
    path: path.resolve(__dirname, 'dist'), // Dossier pour les fichiers de sortie
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Applique la règle aux fichiers avec extension .js
        exclude: /node_modules/, // Exclut le dossier node_modules
        use: {
          loader: 'babel-loader', // Utilise babel-loader pour transpiler
        },
      },
      {
        test: /\.css$/, // Applique la règle aux fichiers avec extension .css
        use: [
          'style-loader', // Ajoute le CSS au DOM
          'css-loader',   // Traite le CSS
        ],
      },
    ],
  },
  plugins: [
    // Plugins supplémentaires (par exemple, pour la minification, la copie de fichiers)
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, // Active la compression
    port: 9000,     // Port du serveur de développement
  },
};

Webpack est devenu la norme pour la construction d'applications web modernes, notamment avec des frameworks et bibliothèques comme React, Vue et Angular.