Webpack : installation et configuration

Webpack : Installation et Configuration

Salut tout le monde, c'est Lazare!

Dans cette vidéo, on va voir comment installer et configurer Webpack pour commencer à l'utiliser dans vos projets. Voici un petit résumé des étapes :

  1. Initialisation du Projet : On commence par créer un nouveau dossier et initialiser un projet Node avec :

    npm init -y

    Cela crée un fichier package.json pour gérer nos dépendances.

  2. Installation de Webpack et Webpack CLI : Pour utiliser Webpack, il faut l'installer ainsi que l'outil de ligne de commande :

    npm install webpack webpack-cli --save-dev

    Cela installe Webpack en tant que dépendance de développement.

  3. Créer les Fichiers Nécessaires : On crée un fichier d'entrée assets/index.js qui sera le point de départ de notre application.

  4. Configuration de Webpack : Ensuite, on crée un fichier webpack.config.js pour configurer Webpack :

    const path = require('path');
    
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        mode: 'development',
    };
    • entry : indique à Webpack quel fichier est le point d'entrée.
    • output : définit où le bundle généré doit être enregistré.
    • mode : ici, on utilise le mode développement pour faciliter le travail.
  5. Lancer Webpack : Pour compiler notre code avec Webpack, on utilise la commande :

    npx webpack

Voilà, c'est tout pour l'installation et la configuration de base de Webpack ! Avec cette configuration, vous pouvez déjà commencer à structurer vos projets et à gérer vos dépendances de manière efficace. 😊

Publié
Technologies utilisées
Lazare Fortune
Auteur :
Lazare Fortune