webpack
Serwer programistyczny: webpack-dev-server

Instalacja

webpack-dev-server można zainstalować za pomocą npm

npm --save-dev webpack-dev-server

teraz możesz uruchomić serwer

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

Aby uprościć użytkowanie, możesz dodać skrypt do package.json

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

teraz, aby uruchomić serwer, którego możesz użyć

npm run start

webpack-dev-server jest skonfigurowany w pliku webpack.config.js w sekcji devServer .

Aby zmienić katalog bazowy zawartości serwera, możesz użyć opcji contentBase . Może wyglądać przykładowe ustawienie katalogu głównego katalogu public_html

let path = require("path");

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

Korzystanie z serwera proxy

webpack-dev-server może proxy niektórych żądań do innych serwerów. Może to być przydatne do tworzenia klienta API, gdy chcesz wysyłać żądania do tej samej domeny.

Serwer proxy jest konfigurowany za pomocą parametru proxy .

Przykładowa konfiguracja serwera deweloperskiego przesyłającego żądania do /api do innej usługi nasłuchującej na porcie 8080 może wyglądać następująco

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

przepisać

Możliwe jest przepisanie ścieżki docelowej za pomocą opcji pathRewrite .

Zakładając, że chcesz usunąć prefiks /api z poprzedniego przykładu, konfiguracja może wyglądać

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

Żądanie /api/user/256 zostanie przekonwertowane na http://localhost:8080/user/256 .

filtr

Możliwe jest proxy tylko niektórych żądań. bypass pozwala na podanie funkcji, której wartość zwrotna określi, czy żądanie powinno być proxy, czy nie.

Zakładając, że chcesz tylko proxy żądań POST do /api i pozwól webpack zająć się resztą twoja konfiguracja może wyglądać następująco

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