Configurer Webpack

Webpack est un puissant outil de bundling pour les applications web modernes. Dans ce guide, nous allons configurer rapidement un projet de base pour compiler des fichiers JavaScript avec Webpack.

Configurer une Configuration de Base avec Webpack

Webpack offre une grande flexibilité pour gérer vos fichiers JavaScript et autres actifs, comme les styles CSS.

Prérequis

Assurez-vous que Node.js est installé. Vérifiez votre installation avec ces commandes :

node -v
npm -v

Initialisez votre projet avec npm :

npm init -y

Installez Webpack et Webpack CLI comme dépendances de développement :

npm install webpack webpack-cli --save-dev

Créer la structure du projet

Créez un dossier src pour stocker vos fichiers JavaScript et un dossier dist pour les fichiers compilés :

mkdir src
mkdir dist
touch src/index.js

Dans le fichier src/index.js, ajoutez le code suivant :

console.log("Hello, Webpack!");

Configurer Webpack pour compiler le fichier JavaScript

Créez un fichier de configuration Webpack nommé webpack.config.js à la racine du projet :

const path = require('path');

module.exports = {
  entry: './src/index.js', // point d'entrée de l'application
  output: {
    filename: 'bundle.js', // fichier de sortie
    path: path.resolve(__dirname, 'dist'), // dossier de sortie
  },
  mode: 'development', // mode de développement par défaut
};

Ajouter les scripts npm

Dans le fichier package.json, ajoutez les scripts suivants pour exécuter Webpack en mode développement et production :

"scripts": {
  "build": "webpack",
  "start": "webpack --watch"
}

Démarrer le serveur de développement

Vous pouvez maintenant lancer Webpack en mode veille avec la commande suivante :

npm run start

Compiler le projet pour la production

Pour compiler les fichiers optimisés pour la production, utilisez cette commande :

npm run build

Conclusion

Cette configuration de base vous permet de commencer à utiliser Webpack dans vos projets JavaScript. Vous pouvez l’étendre avec des loaders et des plugins pour gérer des styles, des images et d’autres types d’actifs, selon vos besoins.

Pour plus d’options avancées, consultez la documentation officielle de Webpack.