Sélectionner une page

Formation > Blog > Langage > Booster vos développements front-end avec Webpack (première partie)

Logo Webpack 200x175

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 😉

UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?

Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.

ILS SE SONT FORMÉS CHEZ NOUS

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp