webpack
Utvecklingsserver: webpack-dev-server

Installation

webpack-dev-server kan installeras via npm

npm --save-dev webpack-dev-server

nu kan du starta servern

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

För att förenkla användningen kan du lägga till skript till package.json

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

nu för att köra server du kan använda

npm run start

webpack-dev-server är konfigurerad i webpack.config.js filen i avsnittet devServer .

För att ändra contentBase kan du använda alternativet contentBase . Exempel på konfiguration av rotkatalogen till public_html kan se ut

let path = require("path");

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

Med hjälp av proxy

webpack-dev-server kan proxy vissa förfrågningar till andra servrar. Detta kan vara användbart för att utveckla API-klienten när du vill skicka förfrågningar till samma domän.

Proxy konfigureras via proxy parameter.

Exempel på konfiguration av dev-server som skickar förfrågningar till /api till annan tjänsten som lyssnar på port 8080 kan se ut så här

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

skriva om

Det är möjligt att skriva om destinationsvägen med alternativet pathRewrite .

Förutsatt att du vill strippa /api prefixet från föregående exempel kan din konfigurering se ut

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

Begäran /api/user/256 konverteras till http://localhost:8080/user/256 .

filtrera

Det är bara möjligt att proxy endast vissa förfrågningar. bypass ger dig möjlighet att tillhandahålla funktion som returneringsvärde kommer att avgöra om begäran ska proxyseras eller inte.

Förutsatt att du bara vill proxy endast POST-förfrågningar till /api och låta webpack hantera resten kan din konfiguration se ut så här

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