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 :
- 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.