|
Publié le par Davy CLAISSE

Webpack

Comment concaténer un fichier JS à ses dépendances ?

Éléments du problème :

  • Je dispose d'un fichier JS (Main.js).
  • Ce fichier importe d'autres fichiers JS via le mot-clef require de TypeScript / ES6.
  • Ces fichiers JS importent eux-mêmes d'autres fichiers et ainsi de suite à N niveaux de profondeur.
  • Potentiellement, un fichier est importé plusieurs fois, à plusieurs niveaux de profondeur.

Que souhaitons-nous faire ?

  • Avoir un seul fichier JS en sortie où tous les fichiers sont concaténés (nous appelons cela un bundle).
  • Que l'ensemble des fichiers JS soit inclus le bon ordre dans ce bundle.
  • Éviter toute duplication de code dans ce bundle.
  • Si certains fichiers ne sont jamais utilisés / importés par le fichier Main.js ou par l'une de ses dépendances, alors ne pas les inclure dans le bundle.
    • Ce procédé s'appelle du tree-shaking et il permet d'éliminer le code mort.

Comment faire ?

  • Utiliser Webpack.
  • Créer un fichier webpack.conf.js à la racine de votre projet et y déposer le code suivant :
module.exports = {
    entry: {
        Car : './src/Main.js'   // Charge ce fichier ainsi que toutes ces dépendances (mot-clef _require_)
    },

    output: {
        path: './target',       // Le répertoire où sera produit le bundle
        filename: 'bundle.js'   // Le nom du fichier bundle à générer
    }
};

Voilà, vous venez de concaténer des classes JS en parcourant leurs dépendances avec Webpack.