Webpack pour vous servir (3/3)
Les outils — Épisode 4
Ceci est le troisième est dernier épisode de notre série sur Webpack. Pour découvrir les bases, rendez-vous à l’épisode 1. Pour gérer la mise en production, rendez-vous à l’épisode 2.
Un serveur pour le développement
Pour afficher une application dans le navigateur, même localement, il est nécessaire de l’héberger sur un serveur, qui est chargé a minima de fournir les fichiers nécessaires et de faire les vérifications de sécurité usuelles (droits d’accès, etc.).
C’est un peu paradoxal, et un peu lourd, de devoir mettre en place un backend, quand on est en train de développer un frontend en JavaScript/CSS/HTML… Après tout, nous ne sommes pas ici pour faire du PHP ou passer la journée à installer un serveur Apache sur notre machine.
Webpack DevServer à la rescousse
Webpack, c’est vraiment le gendre idéal, il sait tout faire ! Webpack DevServer est un serveur de développement, que l’on peut configurer pour servir nos fichiers mais aussi mettre à jour automatiquement l’application dès que l’on fait une modification.
Plus besoin de mettre en place un backend pour tester votre application, ou de combiner des outils comme http-server, gulp-watch et autres, Webpack s'occupe de tout et l'installation ne dure que quelques secondes.
Attention, Webpack DevServer n’est PAS un serveur utilisable en production, il ne sert que dans le cadre des phases de développement. Il faudra utiliser une autre technologie (serveur PHP, Node, hébergement statique type Github, etc.) pour mettre en ligne votre application.
Mise en place du serveur
Installez le package webpack-dev-server
npm install --save-dev webpack-dev-serveret ajoutez ces lignes à votre config :
devServer: {
contentBase: './dist'
},et enfin lancez le serveur:
webpack-dev-server --open --config webpack.config.dev.jsRien de plus simple ! Votre application va s’ouvrir dans le navigateur grâce à l’option --open. Modifiez maintenant un élément de l'application, par exemple la couleur de fond de la balise html dans le fichier style.scss.
L’application va se mettre à jour automatiquement lors des modifications. Pour avoir des mises à jour plus fines, vous pouvez vous intéresser au Hot Module Replacement (HMR).
Vous savez désormais tout ce qu’il faut savoir sur Webpack. Maintenant, vous êtes équipés pour coder efficacement en JavaScript !
