25 Juil 2016

Utiliser Webpack avec AngularJS – Partie 1

webpack

Au détour d’une réunion technique, j’entends parler de Webpack. Il est présenté comme un facilitateur, un outil permettant de nous sortir de nos task-runners gulp ou grunt, qui peuvent rappeler, par moments, la grande époque du développement logiciel où beaucoup était fait à la main.

Projet déjà très populaire au sein de la communauté ReactJS, il apporte des fonctionnalités plutôt pratiques :

  • disposer de toutes les ressources statiques en tant que module,
  • intégrer et consommer des bibliothèques tierces très simplement en tant que module,
  • séparer votre build en plusieurs morceaux, chargés à la demande,
  • adapté pour les gros projets.

Qu’est-ce que Webpack?

Comme son nom nous le laisse deviner, il permet de packager pour le web.

A l’origine, celui-ci n’était prévu que pour le JavaScript mais il existe une grande quantité de loaders, plugins et autres personnalisations.

Aujourd’hui, un simple require ou import dans votre code permet d’intégrer le fichier dans votre lot web.

 

webpack module bundler

Comme vous pourrez le remarquer, il peut aussi bien s’occuper de vos modules JavaScript (AngularJS, CommonJS, etc.) que de vos modules CSS ou encore vos fichiers PNG, Json, HTML… Il peut aussi compiler vos fichiers TypeScript, Pug, mustache, sass, etc. avant de les intégrer.

De plus, il a été pensé pour permettre de diviser votre package en plusieurs bundles pour jouer avec le lazy loading, notamment grâce au Hot Module Replacement.

 

Comment utiliser Webpack ?

Webpack est déjà très populaire mais majoritairement dans la communauté ReactJS.

Je vous proposerai donc, plutôt, un petit Tutoriel avec AngularJS en trois étapes :

  • Etape 1 : Les bases pour une première application
  • Etape 2 : La gestion des tests unitaires avec Karma pour Webpack
  • Etape 3 : Routing et Lazy Loading

 

Etape 1 : Les bases

Entrons dans le vif du sujet

Avant toute chose, il nous faut de quoi travailler :

  • Un IDE (VS Code, WebStorm ou encore Visual Studio)
  • NodeJS installé (6.2+)

Pour mettre un minimum de piquant sans pour autant aller trop loin : une page web via l’outil de templating Pug et un fichier Javascript qui lancera une alerte.

La première chose à faire, se trouver un répertoire bien confortable sur son disque et y lancer l’initialisation du package.json :

Installons ensuite webpack :

Puisque le templating sera sous Pug, il nous faut de quoi l’interpréter puis le transformer en HTML

Il est à savoir que la vocation première de webpack est de créer des bundles JS. Il nous faut donc donc un plugin pour générer notre fichier index.html.

Nous voilà donc prêts pour le début des développements

Créons, dans un répertoire src, un fichier index.pug avec le contenu suivant :

Ajoutons-y un fichier index.js

 

Passons à Webpack

Nous allons maintenant configurer notre Webpack.

Création du fichier bundle.js

Créons notre fichier de configuration Webpack (webpack.config.js)

En lançant la commande

Vous devriez voir apparaître un nouveau répertoire dist contenant un fichier bundle.js comme suit :

Vous pouvez remarquer quelques lignes préfixées de /******/. En fait, Webpack encapsule le code des différents fichiers du bundle pour gérer au mieux les dépendances.

Aux vues du code d’origine, l’intérêt n’est pas flagrant mais nous aurons l’occasion d’y revenir.

Création du fichier index.html

Attaquons nous maintenant à notre index.pug. Souvenez-vous, Webpack n’est pas prévu, d’origine, pour s’attaquer à des fichiers autres que js autrement que par dépendance.

Pour corriger ce manquement, il existe un plugin que nous avons déjà installé (html-webpack-plugin).

Il suffit donc maintenant de le déclarer et l’utiliser dans notre webpack.conf.js

Puisque nous utilisons un outil de templating (pug), nous devons aussi le déclarer

L’ensemble de ces lignes nous permettra de compiler notre ./src/index.pug vers ./dist/index.html

Si nous relançons la commande

Nous obtenons un fichier index.html contenant le pug compilé plus une référence au bundle javascript généré précédemment.

 

Création des tâches

Bon, lancer la commande webpack à chaque modification de code ça risque de fatiguer à la longue.

Je vous propose donc de se créer deux tâches NPM pour nous aider.

Dans votre package.json, modifions le noeud script comme suit :

Comme vous avez dû le comprendre, la tâche build fait exactement la même chose que ce que nous faisions précédemment. La tâche dev, en revenche, y ajoute le mode watch qui scrute les fichiers sources et met à jour les bundles à chaque modification de code.

Une question devrait vous tarauder : “Mais que sont ces arguments bail, progress et profile?”

  • –profile permet d’afficher le détail des actions effectuées par Webpack
  • –progress permet d’afficher la progression globale (en pourcentage)

D’autres options sont possibles, vous aurez plus de détails sur cette page.

Vous pouvez tester en lançant la task dev et en modifiant votre code javascript

 

Plus loin… Un peu de javascript avec AngularJS?

Voilà, il est temps, maintenant, de passer la seconde et de créer une vraie application Javascript via AngularJS et Angular Material.

Pour commencer, importons les packages npm nécessaires :

Il est à noter que angular-animate et angular-aria sont des pré-requis à angular-material. En effet, si vous oubliez de les importer, l’installation d’angular-material vous le rappellera.

Nous pouvons donc maintenant modifier notre fichier index.js pour y créer notre application angularJS.

Nous n’aurons pas besoin de modifier spécifiquement notre pug puisque notre code JavaScript le fait pour nous.

Bon, c’est bien joli tout ça mais il va aussi nous falloir de quoi faire du design. Et pour ça, rien de mieux qu’Angular Material. Ajoutons donc ce qu’il nous faut pour charger le style et les directives Angular Material en remplaçant

par

puis ajoutons le module dans l’application AngularJS

Mince, notre configuration actuelle de Webpack ne sait pas interpréter le CSS !

Installons les modules npm

Profitons-en aussi, puisque nous avons commencé nos développements en ES2015, pour installer et configurer Babel

Ceci nous servira à avoir des bundles en ES5 (compatible avec un maximum d’explorateurs web).

Puis, adaptons notre configuration en ajoutant les loaders CSS et Babel à notre liste de modules

Il est à noter que les loaders sont chargés de bas en haut dans cette liste.

Voyons ce qui se passe lorsque nous lançons la tâche ‘dev’

Tout se déroule, normalement, bien mais comment vérifier tout ça dans son explorateur web ?

En gros, vous avez deux solutions : installer et configurer un Apache ou un IIS… ou pas… Voyons ensemble cette deuxième solution par la pratique : installons un nouveau package npm :

Puis ajoutons une nouvelle tâche dans notre package.json :

Avec cette nouvelle tâche, vous aurez donc maintenant un serveur NodeJS qui fera tourner votre application web. Je n’ai pas ajouté, dans la commande npm ‘devserver’ d’argument “–watch” car il est implicite. En effet, chaque modification regénérera automatiquement le bundle associé.

Une fois la tâche lancée, vous n’aurez qu’à aller à l’URL http://localhost:9100/ pour vérifier vos développements.

Bon, d’accord… Une fois l’explorateur lancé sur l’URL, la page est blanche… Mais lancez le mode développeur et inspecter le code source, vous y verrez l’application Angular ainsi que le CSS dans l’HTML. 😉

C’est donc un bon début, il ne nous reste qu’à ajouter un controleur et du graphisme !

Commençons par ajouter un controleur. Créons quelques éléments comme suit :

  • src (existant)
    • HelloWorld
    • HelloWorldController.js
    • HelloWorld.js

HelloWorldController.js :

HelloWorld.js :

Modifions maintenant le fichier index.js qui utilisera ce nouveau module en ajoutant l’import qui va bien :

Et en le référençant dans notre module principal :

Rendons visible ces nouveaux éléments via notre index.pug :

Notre Webpack Dev Server devrait nous fournir, maintenant, une jolie page.

  • L’entête contient la donnée inscrite dans le scope
  • La ligne juste en dessous contient une donnée de l’instance en cours du contrôleur

Cette dernière permettra, notamment, d’être plus proche de la compatibilité Angular 2 (pour plus de détails, la page dédiée de John Papa).

 

Sources et suite…

Nous savons donc maintenant créer une application de base avec Webpack et AngularJS. Dans la prochaine étape, nous verrons comment coupler Webpack à Karma pour les tests unitaires mais aussi comment gérer les différents environnements (test, développement et production) au sein de Webpack en le rendant un peu plus dynamique encore.

Une seconde partie de cet article viendra sous peu. En attendant, vous pourrez jouer avec les sources de ce tutoriel ici.

See you soon!

Share