Formation Comprendre Webpack : Dev server

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"
    }
  },