Webpack est un outil qui devient de plus en plus incontournable lorsque l'on souhaite "modulariser" notre JavaScript mais qui reste malheureusement assez difficile à configurer. On trouve d'ailleurs pas mal de templates qui vous permettent de commencer plus rapidement mais qui se limitent malheureusement à la création de SPA (Single Page Application). Aussi je vous propose de partager avec ma configuration.
Webpack + Framework Backend
La plupart des frameworks modernes proposent un gestionnaire d'asset mais cette approche possède plusieurs problèmes :
- Le build de votre code Frontend va devenir dépendant de votre techno backend.
- Il n'est pas possible d'utiliser le Hot Module Reloading qui permet de réactualiser les modules "à chaud" sans rafraichir la page.
- Le build réécrit souvent les fichiers à chaque modifications (ce qui peut s'avérer relativement long).
Aussi je vous propose de découvrir mon workflow afin de pouvoir utiliser webpack avec votre framework backend. Le fonctionnement de base est le suivant :
- Pendant le développement les assets seront distribuées gràce au serveur de développement webpack-dev-server et le rafraichissement se fera gràce au webpack-hot-middleware. Côté backend on chargera le JS depuis ce serveur avec par exemple
http://localhost:3000/assets/app.js - Pour la mise en production on génèrera les fichiers en séparant le CSS gràce à extract-text-webpack-plugin et en ajoutant un hash au nom du fichier afin d'invalider le cache lors d'une mise à jour. On génèrera aussi un fichier JSON qui contiendra les noms associés à chaque entrypoint gràce à assets-webpack-plugin afin que notre backend obtiennent les bons chemins.
