webpack
Entwicklungsserver: webpack-dev-server

Installation

webpack-dev-server kann über npm installiert werden

npm --save-dev webpack-dev-server

Jetzt können Sie den Server starten

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

Um die Verwendung zu vereinfachen, können Sie der package.json Skript package.json

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

Jetzt können Sie den Server ausführen, den Sie verwenden können

npm run start

webpack-dev-server wird in der Datei webpack.config.js im Abschnitt devServer .

Um das Basisverzeichnis des Serverinhalts zu ändern, können Sie die Option contentBase . Ein Beispiel für das Konfigurationsverzeichnis für die Einstellung public_html könnte folgendermaßen aussehen

let path = require("path");

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

Proxy verwenden

webpack-dev-server kann einige Anfragen an andere Server weiterleiten. Dies kann für die Entwicklung eines API-Clients hilfreich sein, wenn Sie Anforderungen an dieselbe Domäne senden möchten.

Proxy wird über proxy Parameter konfiguriert.

Eine Beispielkonfiguration für den dev-Server, der Anforderungen an /api an andere Dienste weiterleitet, die auf Port 8080 warten, könnte folgendermaßen aussehen

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

umschreiben

Es ist möglich, den pathRewrite Option pathRewrite neu zu schreiben.

Angenommen, Sie möchten das /api Präfix aus dem vorherigen Beispiel entfernen, so könnte Ihre Konfiguration aussehen

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

Die Anfrage /api/user/256 wird in http://localhost:8080/user/256 konvertiert.

Filter

Es ist möglich, nur einige Anfragen zu vertreten. bypass können Sie eine Funktion bereitstellen, deren Rückgabewert bestimmt, ob die Anfrage weitergeleitet werden soll oder nicht.

Angenommen, Sie möchten nur POST-Anforderungen an /api webpack den Rest der Konfiguration von webpack lassen, so webpack Ihre Konfiguration möglicherweise so aussieht

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