webpack
Serveur de développement: webpack-dev-server

Installation

webpack-dev-server peut être installé via npm

npm --save-dev webpack-dev-server

maintenant vous pouvez démarrer le serveur

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

Pour simplifier l'utilisation, vous pouvez ajouter un script à package.json

// package.json
{
  ...
  "scripts": {
    "start": "webpack-dev-server"
  },
  ...
}

maintenant pour exécuter le serveur que vous pouvez utiliser

npm run start

webpack-dev-server est configuré dans le fichier webpack.config.js de la section devServer .

Pour modifier le répertoire de base du contenu du serveur, vous pouvez utiliser l'option contentBase . Exemple de configuration du répertoire racine du répertoire public_html

let path = require("path");

module.exports = {
  ...
  devServer: {
    contentBase: path.resolve(__dirname, "public_html")
  },
  ...
}

Utiliser un proxy

webpack-dev-server peut webpack-dev-server des requêtes à d'autres serveurs. Cela peut être utile pour développer un client API lorsque vous souhaitez envoyer des requêtes au même domaine.

Le proxy est configuré via le paramètre proxy .

Exemple de configuration d'un serveur de dev transmettant des requêtes à /api à un autre service écoutant sur le port 8080 pourrait ressembler à ceci

// webpack.config.js
module.exports = {
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }
  }
...
}

récrire

Il est possible de réécrire le chemin de destination en utilisant l’option pathRewrite .

En supposant que vous voulez supprimer /api préfixer /api de l'exemple précédent, votre configuration pourrait ressembler à

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        pathRewrite: {"^/api" : ""}
      }
    }
  }
...

Request /api/user/256 sera converti en http://localhost:8080/user/256 .

filtre

Il est possible de ne proxy que certaines requêtes. bypass vous permet de fournir une fonction dont la valeur de retour déterminera si la requête doit être mandatée ou non.

En supposant que vous voulez seulement protéger uniquement les requêtes POST vers /api et laisser webpack gérer le reste, votre configuration pourrait ressembler à ceci:

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        bypass: function(req, res, proxyOptions) {
          if(req.method != 'POST') return false;
        }
      }
    }
  }
...