Dans ce blog, nous allons aborder la configuration de Webpack dans vos projets web. Webpack est un outil qui permet de regrouper vos fichiers JavaScript, CSS, et autres ressources en un seul fichier optimisé pour améliorer les performances de votre site web. C’est un processus simple mais puissant pour optimiser votre travail.
Étape 1 : Créer un projet
Commencez par créer un projet appelé webpack-demo :
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
Structure de projet
La structure de projet typique est comme la suivante (example) :
webpack-demo
├── package.json
├── package-lock.json
├── index.html
└── /src
└── index.js
Étape 2 : Créer le fichier de configuration
Dans la racine de votre projet, créez un fichier 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
},
};
Concepts de base
À l’étape 2, l' entry (point d’entrée) est l’endroit où Webpack commence à construire les dépendances. C’est le fichier principal dans lequel Webpack analyse les imports/exports et inclut tous les modules nécessaires.
Par exemple, dans le fichier webpack.config.js, l’entrée spécifie le fichier index.js dans le dossier src comme point de départ. Webpack va alors suivre les dépendances de ce fichier pour construire le paquet final (définition de paquet).
La configuration output (point de sortie) détermine comment et où Webpack va générer les fichiers de sortie. Dans l’exemple de output, les propriétés incluent filename (qui définit le nom du fichier de sortie) et path (qui spécifie le répertoire où le fichier sera créé).
C’est très utile, car cela permet de personnaliser l’emplacement et le nom des fichiers générés par Webpack.
Ajoute de Plugin
Webpack offre plusieurs plugins qui peuvent optimiser le code des développeurs. Dans la documentation officielle, il explique l’utilisation des plugins, mais dans ce blog, je vais juste donner un exemple d’un plugin et montrer comment l’ajouter à un projet. Ensuite, j’ajouterai cinq plugins supplémentaires.
Pour utiliser un plugin, il doit être installé et ajouté au plugins dans la configuration de Webpack.
Par exemple, pour utiliser HtmlWebpackPlugin (utilisé pour simplifier la création de fichiers HTML destinés à servir vos bundles Webpack et pour injecter les bundles Webpack dans le fichier HTML) commencez par l’installer avec npm :
npm install --save-dev html-webpack-plugin
Puis configurez-le dans votre fichier webpack.config.js (la configuration des plugins se fait à l’intérieur de l’objet module.exports):
// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
],
};
*const HtmlWebpackPlugin = require('html-webpack-plugin'); // Importation du plugin HtmlWebpackPlugin
*filename: 'index.html', // Nom du fichier HTML généré dans le dossier de sortie.
Plugins à explorer
Vous vous souvenez du code splitting et du tree shaking mentionnés dans mon blog précédent ? Webpack offre plusieurs plugins pour faciliter cette tâche.
code splitting
-
DllPlugin : Permet de diviser le code en plusieurs morceaux (bundles) pour améliorer les temps de build, en précompilant les bibliothèques externes qui sont peu ou moins modifiées dans un fichier DLL.
-
SplitChunksPlugin : Plugin intégré à Webpack qui permet de partager des parties du code entre plusieurs bundles, avec des options pour un contrôle selon vos besoins
// webpack.config.js module.exports = { //... optimization: { splitChunks: { // include all types of chunks chunks: 'all', }, }, };
tree shaking
TerserWebpackPlugin : Il supprime le code inutilisé lors du processus de minification.
Pour commencer, vous devrez installer terser-webpack-plugin :
npm install terser-webpack-plugin --save-dev
Ensuite, ajoutez le plugin à webpack.config.js
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};
Notez que les plugins de code splitting et tree shaking ne sont pas basiques. Leur utilisation dépend des besoins du développeur. En fonction du projet, ces plugins peuvent être configurés et ajoutés pour optimiser les performances et la gestion du code.
Voici d'autres plugins :
-
CopyWebpackPlugin : Copie des fichiers individuels ou des répertoires entiers vers le répertoire de build.
-
IgnorePlugin : Exclut certains modules des bundles.
Conclusion
Pour conclure ce blog, nous avons vu comment créer un projet avec Webpack, où nous devons effectuer des modifications des points d'entrée (entry) et de sortie (output), ainsi que l'utilisation de 5 plugins au total, dont 2 font partie du code splitting, 1 du tree shaking, et 2 plugins supplémentaires. Dans le prochain blog, nous parlerons de webpack-dev-server, un outil essentiel pour faciliter le développement avec Webpack
Référence
« Plugins » dans webpack site officiel, https://webpack.js.org/plugins/ (page consultée le 12 février 2025).
« TerserWebpackPlugin» dans webpack site officiel, https://webpack.js.org/plugins/terser-webpack-plugin/ (page consultée le 12 février 2025).
« Code Splitting » dans webpack site officiel,https://webpack.js.org/guides/code-splitting/#splitchunksplugin(page consultée le 13 février 2025).
« Entry Points» dans webpack site officiel, https://webpack.js.org/concepts/entry-points/ (page consultée le 12 février 2025).
« Installation » dans webpack site officiel,https://webpack.js.org/guides/installation/(page consultée le 12 février 2025).
«Tutoriel Webpack 5 pour les débutants » dans Gekkode, https://www.gekkode.com/developpement/tutoriel-webpack-5-pour-les-debutants/ (page consultée le 12 février 2025).
« DllPlugin » dans webpack site officiel,https://webpack.js.org/plugins/dll-plugin/ (page consultée le 13 février 2025).
Commentaires