|
Publié le par Davy CLAISSE

Webpack

Comment minifier un bundle de fichiers JS ?

Article précédent : Comment créer plusieurs bundles JS différents ?

Éléments du problème :

  • Je parviens à concaténer mes fichiers JS dans un bundle unique.
  • Le JavaScript de ce bundle n'étant pas minifié, il est particulièrement volumineux.

Que souhaitons-nous faire ?

  • Produire un bundle avec du code JavaScript intégralement minifié (on parle alors d'uglification).

Comment faire ?

  • Utiliser Webpack.
  • Créer un fichier webpack.conf.js à la racine de votre projet et y déposer le code suivant :
var webpack = require("webpack");                   // Import de Webpack et de ses plugins intégrés (pour la minification)

module.exports = {
    entry: [                                    // La liste des fichiers à concaténer
        './src/Car.js',
        './src/Vehicule.js'
    ],

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

    plugins: [
        new webpack.optimize.UglifyJsPlugin({   // Le plugin webpack permettant la minification
            minimize: true                      // Activation de la minification (ne fait rien à 'false')
        })
    ]
};

Voilà, vous venez de concaténer des fichiers avec Webpack.