Publié le 06/02/2017, rédigé 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 :

Que souhaitons-nous faire ?

Comment faire ?

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.