Tutoriel webpack

Installation de WebPack

Avant d’intaller webpack il faut installer Node.js car webpack fonctionne grâce à Node. De plus on a aussi besoin de NPM le gestionnaire de module inclut dans Node.

Installation de Node sur Windows.

Il suffit de lancer l’installation, si vous ne touchez rien Node est installé de manière globale, un chemin est ajouté à votre PATH pour que vous puissiez appeler Node de n’importe où.

Test de l’installation de Node

Ouvrir une fenêtre « Invite de Commandes » (la console) sur Windows.

Taper :

node --version

Si tout fonctionne vous devez voir la version de Node installée.

Création du projet

Créer un répertoire « TestWebPack ».

Se placer dans le répertoire « TestWebPack » avec la fenêtre « Commande ». Dans la suite toute les commandes sont tapées dans la fenêtre « Commande ».

Taper :

npm init

La commande npm init va vous aider un créer un fichier de configuration package.json. C’est le fichier de configuration de NPM. A chaque fois que vous téléchargez un fichier avec NPM vous pouvez l’ajouter au fichier package.json. Ainsi si vous voulez reconstruire votre répertoire sur un autre PC, vous prenez le fichier package.json et NPM va importer tous les fichiers directement (npm install). A chaque question de l’utilitaire vous pouvez taper sur retour.

A la fin des questions taper sur « y », un fichier package.json a été créé avec vos informations dans le répertoire « testWebPack ».

Désormais on peut télécharger webpack.

Taper :

npm install --save-dev webpack

--save-dev signifie que l’on va sauvegarder le nom du module et la version dans le fichier package.json. Tous les modules téléchargés à partir de NPM se trouve dans le répertoire « node_modules ».

Webpack étant en place. On peut s’attaquer à la programmation et reprendre notre premier exemple en le transformant pour qu’il fonctionne avec Webpack.

Créer les fichiers et les répertoires pour obtenir le résultat suivant dans testWebPack

Répertoire node_modules
Répertoire dist
Répertoire src
          js1.js
          js2.js
index.html
package.json
webpack.config.js

Package.json et node_modules existent déjà.

Principe :

On va utiliser webpack pour rassembler tous les fichiers javascript (js1 et js2) dans un seul fichier que nous appellerons app.bundle.js. Ce sera le seul fichier qui sera importé par index.html.

Dans le fichier js1.js

function display(msg)
{
    alert(msg);
};
export {display};

Dans le fichier js2.js

import {display} from './js1.js';

display("hello world");

Dans le fichier index.html

<html>
<head>

</head>

<body>
        <h1>Test Webpack</h1>
        <script src="./dist/app.bundle.js"></script>
</body>

</html>

Dans le fichier webpack.config.js

const path = require('path');

module.exports = {

    entry: './src/js2.js',
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
    }
};

Au lancement de la commande webpack dans la console le fichier webpack.config.js sera exécuté.

Explication du fichier webpack.config.js

On importe déjà le module path de node pour pouvoir utiliser les fonctions travaillant sur les chemins comme resolve. Require fonctionne de la même manière que la commande import mais pour Node.

On définit ensuite le point d’entrée des fichiers javascript ici js2.js puis on indique où va se trouver le fichier de résultat app.bundle.js.

Lancement de webpack dans la console

.\node_modules\.bin\webpack

Après quelques instants vous pouvez voir le résultat un fichier a été généré dans le répertoire dist : app.bundle.js

Vous pouvez retrouver votre fonction dans le fichier de app.bundle.js:

/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return display; });
function display(msg)
{
alert(msg);
};

Tester le programme en affichant la page index.html dans votre navigateur favori. Le programme fonctionne et affiche une fenêtre "hello word".

Si vous ajoutez dans le fichier index.html après l’import de script la commande :

<script>window.display("Cela fonctionne");</script>

Vous voyez que cela ne fonctionne plus désormais les fonctions ne sont plus définies dans l’espace global.

L'installation est désormais terminée webpack est installé et fonctionne.