Exploration des plugins sur Webpack

Par ccandanedosanchez, 13 mars, 2025

Salut à tous, bienvenue à nouveau sur mon blog ! Dans ce sixième article, nous allons continuer à explorer comment optimiser un projet, mais cette fois-ci, nous allons parler des plugins ! Grâce aux plugins, on peut automatiser des tâches, améliorer les performances et personnaliser le processus de build selon nos besoins.

Pourquoi utiliser les plugins Webpack ?

Dans mon dernier article, j’ai comparé Vite et Webpack, ainsi que leurs plugins. J’ai mentionné que la bibliothèque de Webpack est plus grande, notamment parce que Webpack existe depuis 2012.

Les plugins sont essentiels pour optimiser le workflow et améliorer les performances des applications web. Ils permettent, par exemple :

D’optimiser les performances (ex : compression d’images).
D’automatiser certaines tâches (ex : nettoyage des fichiers inutiles, génération automatique de fichiers HTML).
Et bien plus encore…

Les plugins Webpack les plus populaires

1- Terser webpack plugin

Ce plugin est idéal si tu souhaites que ton site web se charge rapidement. C'est un excellent outil pour minimiser la taille des fichiers JavaScript générés en production. En réduisant la taille des fichiers JavaScript, l'ensemble du site se chargera plus vite, améliorant ainsi les performances et l'expérience utilisateur.

Ajout du plugin à ta configuration Webpack

Ajout le plugin à ton fichier webpack.config.js comme suit :

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

2- Mini CSS Extract plugin

Le MiniCssExtractPlugin permet d'extraire le CSS dans des fichiers séparés, au lieu de le maintenir dans les bundles JavaScript. Cela est particulièrement utile pour l'optimisation des performances, car cela permet aux navigateurs de charger le CSS indépendamment du JavaScript, ce qui améliore le temps de chargement du site.

Fonctionnalités principales :

Crée un fichier CSS pour chaque fichier JS contenant du CSS.
Prend en charge le chargement à la demande du CSS.

Pour extraire le CSS dans un fichier séparé (par exemple, styles.css), ajoutez la configuration suivante à votre webpack.config.js.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'styles.css' }),
  ],
};

3- HtmlWebpackPlugin

Génère automatiquement un fichier HTML en incluant les fichiers JS et CSS générés.

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

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

Cela générera un fichier dist/index.html contenant ce qui suit :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

Créer et personnaliser ton propre plugin Webpack

Voici un exemple d'un plugin personnalisé

 // my-plugin.js
class MyPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      console.log('This will be logged before assets are emitted.');
      callback();
    });
  }
}
module.exports = MyPlugin;

Comme vous pouvez le voir, il suffit de définir une classe (class MyPlugin) qui implémente la méthode apply. Cette méthode (apply) permet au plugin de s'intégrer au processus de compilation de Webpack.

Ensuite, ajoutez-le au Array plugins (new MyPlugin()) dans le fichier de configuration de Webpack.

// webpack.config.js
const MyPlugin = require('./my-plugin');
module.exports = {
  // other configurations...
  plugins: [
    new MyPlugin(),
  ],
};

Fonctionnement des hooks dans les plugins Webpack

Les hooks dans Webpack permettent aux plugins d'interagir avec le processus de compilation.

Pourquoi utiliser les hooks ?
Un hook représente un moment précis dans le processus de build de Webpack. On peut le voir comme un interrupteur qui déclenche des actions à un moment donné du build.

Voici un exemple d'un plugin utilisant un hook :
Pour afficher un message juste avant que Webpack commence à compiler, on peut utiliser le hook compiler.hooks.compile.

 class SimplePlugin {
  apply(compiler) {
    compiler.hooks.compile.tap('SimplePlugin', () => {
      console.log('Webpack commence la compilation...');
    });
  }
}

module.exports = SimplePlugin;

Lorsque Webpack démarre, ce plugin affiche un message dans la console avant le début de la compilation.

Références

Prasenjit Sutradhar : « An easy-to-understand complete guide to plugins in Webpack 5 » dans linkedin.com, https://www.linkedin.com/pulse/easy-to-understand-complete-guide-plugins-webpack-5-sutradhar (page consultée le 11 Mars 2025).

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

squashlabs: « How To Define A Plugin In Webpack » dans squash.io, https://www.squash.io/how-to-define-a-plugin-in-webpack/ (page consultée le 11 Mars 2025).

Ruben Leija : « The best and proven React Webpack plugins for 2021 » dans linguinecode.com, https://linguinecode.com/post/top-webpack-plugins (page consultée le 12 Mars 2025).

Se connecter pour publier des commentaires

Commentaires1

Article très clair et…

Article très clair et pratique ! J’ai aimé les exemples sur Terser, Mini CSS Extract et HtmlWebpackPlugin. Aussi, comment ces plugins se comparent-ils aux équivalents dans Vite?