> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Configurer Webpack pour un plugin de navigateur

Ce guide explique comment configurer votre projet d'extension de navigateur avec Webpack, en se concentrant sur une configuration qui prend en charge plusieurs points d'entrée JavaScript et la gestion des actifs statiques.

### Étape 1 : Configuration Initiale du Projet

Commence par structurer ton projet pour accueillir les fichiers sources, les actifs statiques et le résultat final empaqueté. Ton répertoire de projet devrait ressembler à ceci :

```
your-extension/
├── public/            # Contient des fichiers statiques comme HTML, CSS, et le manifeste
│   ├── images/
│   ├── icons/
│   ├── manifest.json
│   └── popup.html
├── src/               # Contient ton code source JavaScript
│   ├── background.js
│   ├── popup.js
│   ├── content_script.js
│   └── ... (tout autre fichier JS)
└── package.json       # Fichier de package NPM
```

### Étape 2 : Installation de Node.js et NPM

Assure-toi que Node.js et NPM sont installés sur ton système. Node.js est essentiel pour exécuter l'écosystème de packages, et NPM est utilisé pour gérer les dépendances de ton projet.

### Étape 3 : Installation de Webpack et Autres Dépendances

Navigue vers le répertoire racine de ton projet dans le terminal et initialise un nouveau projet NPM si ce n'est pas déjà fait :

```bash theme={null}
npm init -y
```

Ensuite, installe Webpack et les chargeurs et plugins nécessaires :

```bash theme={null}
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env copy-webpack-plugin file-loader
```

* **Webpack** empaquette ton JavaScript et tes actifs.
* **Babel** te permet d'utiliser des fonctionnalités JavaScript modernes.
* **CopyPlugin** copie des fichiers et répertoires dans ton répertoire de build.
* **File Loader** résout import/require() sur un fichier en une URL et émet le fichier dans le répertoire de sortie.

### Étape 4 : Configuration de Webpack

Crée un fichier `webpack.config.js` à la racine de ton projet. Ce fichier doit définir tes points d'entrée, la configuration de sortie, les règles de module pour charger différents types de fichiers, et les plugins pour des fonctionnalités supplémentaires. Voici à quoi devrait ressembler ton `webpack.config.js` avec la configuration donnée :

```javascript theme={null}
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: 'development', // Utilise 'production' pour les builds de production
    entry: {
        background: path.join(__dirname, 'src', 'background.js'),
        popup: path.join(__dirname, 'src', 'popup.js'),
        content_script: path.join(__dirname, 'src', 'content_script.js'),
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: ""
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader',
                ],
            },
        ]
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: 'public', to: '' } // Copie tous les actifs et le manifest.json de 'public' vers 'dist'
            ],
        }),
    ]
};
```

### Étape 5 : Ajustement du Manifest et des Fichiers HTML

Assure-toi que ton `manifest.json` et tous les fichiers HTML référencent correctement les scripts et les actifs. Par exemple, les scripts seront sortis dans le dossier `dist`, alors mets à jour les chemins en conséquence.

### Étape 6 : Intégration des Scripts de Build dans `package.json`

Après avoir configuré ton projet avec Webpack et l'avoir configuré comme décrit dans les étapes précédentes, tu voudras automatiser les processus de build et de surveillance à l'aide de scripts `npm`. Ouvre ton fichier `package.json` et ajoute les scripts suivants dans l'objet `scripts` :

```json theme={null}
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode production",
  "watch": "webpack --mode development --watch"
},
```

Voici ce que fait chaque script :

* `"build"` : Empaquète ton extension en mode production, optimisant la sortie pour le déploiement. Ce mode active des optimisations comme la minification et l'élimination de code mort.
* `"watch"` : Exécute Webpack en mode développement et surveille tes fichiers pour les changements, recompilant automatiquement le projet lorsqu'un fichier est modifié. Ceci est utile pendant le développement pour un retour immédiat sur les changements.

### Étape 7 : Tester et Construire l'Extension

Pour construire ton extension pour la production, utilise :

```bash theme={null}
npm run build
```

Cette commande invoque Webpack avec le drapeau `--mode production`, optimisant ton projet pour le déploiement.

Pour le développement, tu peux demander à Webpack de surveiller tes fichiers et de recompiler chaque fois que des changements sont détectés :

```bash theme={null}
npm run watch
```

Cela rend le processus de développement plus fluide, car tu n'as pas besoin de reconstruire manuellement le projet après chaque changement.

### Étape 7 : Tester l'Extension

Pour tester ton extension dans Chrome :

1. Va sur `chrome://extensions/` dans le navigateur Chrome.
2. Active le "Mode développeur" en haut à droite.
3. Clique sur "Charger l'extension non empaquetée" et sélectionne ton dossier `dist`.

Cela installera l'extension localement pour les tests et le développement.