|
Publié le par Davy CLAISSE

Webpack

Comment créer plusieurs bundles JS différents ?

Article précédent : Comment concaténer plusieurs libs JS dans un bundle unique ?

Éléments du problème :

  • Je dispose de plusieurs libs écrites en JS.
  • Ces librairies ne doivent pas intégrer le même bundle.

Que souhaitons-nous faire ?

  • Produire un bundle contenant une partie des libs.
  • Produire un autre bundle contenant une autre partie des libs.

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: {
        four-wheels : [                     // Le nom et le contenu du premier bundle
            './src/Car.js',
            './src/Vehicule.js'
        ],

        two-wheels : [                      // Le nom et le contenu du second bundle
            './src/Bike.js',
            './src/Vehicule.js'
        ]
    },

    output: {
        path: './target',                   // Le répertoire où sera produit le bundle
        filename: '[name].bundle.js',       // Le pattern qu'aura le nom des bundles à générer ici 'four-wheels.bundle.js' et 'two-wheels.bundle.js'
        chunkFilename : '[id].bundle.js'    // Permet de récupérer les noms dans le entry
    }
};

Voilà, vous venez de créer plusieurs bundle différents à partir des mêmes fichiers JS avec Webpack.