Bon, je dois refaire du Webpack pour mettre à jour le build d'un tool de la boite. Comme j'ai eu beaucoup de peine à retrouver comment et quoi faire, voici un bref résumé des trucs et astuces à connaître sur Webpack.

Comment concaténer des fichiers JS inter-dépendants ?

Principe : mon fichier JS (Main.js) importe d'autres fichiers JS (cf. le mot-clef require de TypeScript / ES6). Et ces fichiers JS importent également d'autres fichiers. L'idée ici est d'avoir un Webpack qui parcours le graphe des dépendances en analysant le code afin de produire un et un seul fichier JS qui n'inclut que ce dont mon application se sert.

Contenu du fichier webpack.conf.js :

module.exports = {
    entry: {
        Car : './src/Main.js' // Charge ce fichier ainsi que tous ceux dont il dépend via le mot-clef 'require'.
    },
    output: {
        path: './target',
        filename: 'merged-file.js'
    }
};

Comment créer un bundle de fichiers JS qui n'ont aucune dépendance entre-eux ?

Principe : j'ai plein de libs écrites en JavaScript avec mes petites mimines (ou pas), ces librairies n'ont aucune dépendance entre-elles, cependant je souhaiterais les concaténer dans un gros bundle de sorte à minimiser le nombre de requêtes réseau.

Contenu du fichier webpack.conf.js :

module.exports = {
    entry: [
        './src/Car.js',     // La liste des fichiers à concaténer
        './src/Vehicule.js'
    ],
    output: {
        path: './target',
        filename: 'merged-file.js'
    }
};

Comment créer plusieurs bundles de fichiers JS qui n'ont aucune dépendance entre-eux ?

Principe : je reprends les fichiers JS du point précédent à ceci près que je souhaite créer plusieurs bundles, un pour chaque types de véhicules par exemple.

Contenu du fichier webpack.conf.js :

module.exports = {
    entry: {
        four-wheels : [
            './src/Car.js',
            './src/Vehicule.js'
        ],
        two-wheels : [
            './src/Bike.js',
            './src/Vehicule.js'
        ]
    },
    output: {
        path: './target',
        filename: '[name].bundle.js',
        chunkFilename : '[id].bundle.js'
    }
};

Comment minifier mes bundles JS ?

Principe : mes fichiers JS sont gros et je souhaite supprimer le maximum d'espace, les commentaires, réduire le nom des fonctions, variables & Co de sorte à fournir le plus petit fichier possible.

Contenu du fichier webpack.conf.js :

var webpack = require("webpack");
module.exports = {
    entry: [
        './src/Car.js',
        './src/Vehicule.js'
    ],
    output: {
        path: './target',
        filename: 'app.minified.js'
    },

    plugins: [
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]
};