Le monde des outils de développement JavaScript est en perpétuel mouvement depuis quelques années : Grunt, Gulp, Brunch, Browserify, ou encore des scripts node écrit « from scratch ».
Webpack est là pour mettre tout le monde d’accord. Webpack est largement inspiré par Browserify et vous permettra d’utiliser les superpouvoirs du Node Package Manager.
Par exemple, si vous souhaitez utiliser le framework angularJS, vous commencerez par l’installer en tapant npm install angular --save
Pour utiliser votre librairie, il suffira d’écrire quelque chose comme ça : var angular = require('angular');
Vous pourrez bien entendu écrire vos propres modules (comme dans une application node.js).
Passons aux choses sérieuses, installons webpack globalement : npm install webpack webpack-dev-server -g
Vous disposez désormais de deux commandes, une pour votre build, et une autre que vous utiliserez (si vous le souhaitez) durant le développement.
Dans un répertoire quelconque, nous allons créer deux fichiers, index.js et controller.js
//index.js var controller = require('./controller');
//controller.js module.exports.controller = function() { console.log('i am logged in controller.js') }
Dans un terminal, positionnez-vous dans le répertoire dans lequel se trouvent ces deux fichiers : webpack index.js myApp.bundle.js
Vous devrez normalement disposer d’un fichier de plus « myApp.bundle.js ».
Configuration
Il est possible de configurer webpack en ajoutant un fichier « webpack.config.js » à la racine de votre projet. Dans ce fichier, nous allons pouvoir spécifier les paramètres de base (input, output), ainsi que d’autres plus pointus que nous détaillerons plus bas.
//webpack.config.js module.exports = { entry: { main': './index.js', }, output: { path: './dist', filename: 'myApp.bundle.js' } }
Les loaders
Vous pouvez paramétrer la manière dont webpack va traiter les différents fichiers requis. Avec webpack, vous n’êtes pas limité au fichier js. Vous pouvez utiliser « require » avec n’importe quel type de fichier, à condition de disposer du bon « loader ». Un loader est tout simplement un module npm dédié au chargement de fichier dans webpack.
Integration de css et sass
Tout d’abord, installons les loaders. npm install style-loader css-loader sass-loader --save--dev
//webpack.config.js module.exports = { entry: { main': './index.js', }, output: { path: './dist', filename: 'myApp.bundle.js' }, modules: { loaders: [ { test: /\.scss$/, loaders: ['style', 'css', 'sass'], }, { test: /\.css$/, loader: 'style!css', }, ] } }
Désormais, nous pourrons utiliser require avec des fichiers css ou scss, le contenu de ces fichiers sera injecté dans un tag style au runtime.
Les plugins
Les plugins vont nous permettre de modifier la manière dont webpack génère le bundle:
- minification du code
- insertion du tag script dans un fichier html
//webpack.config.js var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { ... plugins: [ new HtmlWebpackPlugin({ template: 'index.html', inject: 'body', }), new webpack.optimize.UglifyJsPlugin() ] }
Ensuite, il nous reste deux choses à faire :
- créer un fichier index.html contenant le minimum syndical (html, head, body)
- installer webpack, et le plugin html localement :
npm install html-webpack-plugin webpack --save--dev
Vous pouvez tester notre nouveau système de build en lançant la commande webpack dans le terminal.
Pour aller plus loin
Suivez notre formation Angular de 3 jours en intra et interentreprise afin d’obtenir une maitrise complète de l’outil. Vous pouvez aussi lire notre article comment se former à Angular pour une vision globale des ressources disponibles sur l’outil.
Si vous avez des questions, les commentaires sont faits pour ça 😉