Dev server

22min
il y a 8 ans
Sources du projet Télécharger la vidéo
Résumé Support

Webpack intègre un serveur de développement qui permet de lancer un petit serveur web pour distribuer les assets et vos fichiers HTML.

Pour lancer ce serveur web il suffit de l'installer.

npm i -D webpack-dev-server

Puis de le lancer en utilisant la commande webpack-dev-server à la place de la commande webpack

./node_modules/.bin/webpack-dev-server

Ce serveur de développement est intéréssant car il est possible d'utiliser un mode "rechargement à chaud" qui va être capable de détecter les changements au niveau de votre code et de recharger une partie (ou la totalité) de la page. Ce mode peut être activé via la configuration ou via l'argument --hot

webpack-dev-server --hot

Si vous avez besoin de plus d'informations sur la configuration n'hésitez pas à faire un petit tour sur la documentation mais voici un exemple pour vous donner une idée de la configuration de base.

devServer: { // Pour afficher les erreurs sur la page overlay: true, // Si on veut rediriger un chemin vers une API ou autre proxy: { "/web": { target: "http://localhost:8000", pathRewrite: {"^/web" : ""} } }, // Fichiers à distribuer contentBase: path.resolve('./public'), // CORS headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS", "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" } },