Webpack : le task runner spécialisé

Voici quelques exemples de ce que peut faire webpack :

• prendre en entrée des fichiers ES6 afin d'obtenir des fichiers ES5.
• prendre ces fichiers ES5 afin des les combiner en un seul
• prendre plusieurs fichiers css et les combiner en un seul

Quelle différence avec un task runner comme Grunt ou Gulp ? Bonne question. Tout simplement la possibilité de combiner des fichiers JavaScript et css ensemble par exemple. Mais aussi une plus grande simplicité.

A noter que Webpack est utilisé exclusivement avec npm, pas avec bower. Vous aurez en outre besoin d'utiliser un système de modules tel que AMD, CommonJS ou ES6.

Installation de webpack

npm install webpack -g  

Utilisation

Indiquez à webpack votre fichier en entrée puis le fichier que vous obtiendrez (traditionnellement nommé bundle)

webpack ./my_input_file.js bundle.js  

Et pourquoi pas un fichier de configuration

Pour cela, créez un fichier de configuration "webpack.config.js"
Ce sera un module CommonJS.

module.exports = {  
  entry: "./my_input_file.js",
  output: {
    filename: "bundle.js"
  }
} 

Pour transpiler d'ES6 ver ES5

C'est à peine plus compliqué.
Tout commence pour l'installation de quelques modules dédiés au transpiler "babel":

npm install babel-core babel-loader babel-preset-es2015 --save-dev  

Puis, il faudra déclarer votre souhait d'utiliser babel dans une nouvelle section "module":

module.exports = {  
    entry: ['./file1.js','./file2.js'],
    output: {
        filename: './bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude:/node_modules/,
                loader: 'babel-loader'
            }
        ]
    }
};

La nouveauté réside donc dans la partie "module". La propriété "loaders" permet d'ajouter des ... loaders. Un loader rend webpack capable d'accomplir de un nouveau type de tâche (ici, transpiler).

"test": précise quels types de fichiers seront pris en compte. Dans notre cas, une regex précise qu'on prendra en entrée tout fichier ".js" ou ".jsx" (cette extension ".jsx" est propre à React et apparait fréquemment dans les exemples relatifs à webpack pour cette raison. Vous pourriez tout aussi bien utiliser uniquement :

test: /\.js$/  

si vous ne faites pas de développement React.
).

"exclude": indique d'ignorer les fichiers qui se trouvent dans node_modules. Pour ignorer également les fichiers installer par bower, il suffirait de remplacer

exclude:/node_modules/  

par

exclude:/node_modules|bower_components/  

"loader": c'est le module npm qui fera le travail (ici la tâche de transpile d'ES6 vers ES5).

Pour exécuter la tâche, dans la console, une fois positionné dans le répertoire qui contient votre fichier webpack.config.js :

webpack  

Installer un serveur de développement géré par webpack

J'avais coutume d'utiliser le serveur web fourni par Python. Mais webpack permet d'utiliser un serveur web :

npm install webpack-dev-server -g  

Important : "-g" pour installer globalement.

Ensuite, pour lancer le serveur

webpack-dev-server  

Il lancera en outre les tâches se trouvant dans le webpack.config.js
Puis dans votre navigateur :

http://localhost:8080/webpack-dev-server/index.html  

A noter qu'avec webpack-dev-server ajouté après le port, une status bar se trouve placée avant le contenu de votre page web. En outre, dès que webpack génère un bundle, votre navigateur sera rafraichi automatiquement. Mais cette status bar finira par vous agacer. Aussi, utilisez simplement :

http://localhost:8080/index.html  

Et pour bénéficier malgré tout de l'automatique reload, lancez le serveur avec l'option --inline :

webpack-dev-server --inline