webpack
Ontwikkelingsserver: webpack-dev-server

Installatie

webpack-dev-server kan worden geïnstalleerd via npm

npm --save-dev webpack-dev-server

nu kunt u de server starten

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

Om het gebruik te vereenvoudigen, kunt u een script toevoegen aan package.json

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

nu om de server uit te voeren die u kunt gebruiken

npm run start

webpack-dev-server wordt geconfigureerd in het bestand webpack.config.js in sectie devServer .

Om de inhoudsdirectory van de server te wijzigen, kunt u de optie contentBase . Voorbeeldconfiguratie waarbij de root-directory op public_html

let path = require("path");

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

Proxy gebruiken

webpack-dev-server kan sommige verzoeken proxy naar andere servers. Dit kan handig zijn voor het ontwikkelen van een API-client wanneer u aanvragen naar hetzelfde domein wilt verzenden.

Proxy wordt geconfigureerd via de proxy parameter.

Voorbeeldconfiguratie van dev-server die aanvragen /api aan /api naar andere services die luisteren op poort 8080 kan er zo uitzien

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

herschrijven

Het is mogelijk om het doelpad te herschrijven met de optie pathRewrite .

Ervan uitgaande dat u het voorvoegsel strip /api uit het vorige voorbeeld wilt verwijderen, ziet uw configuratie eruit

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

Request /api/user/256 wordt geconverteerd naar http://localhost:8080/user/256 .

filter

Het is mogelijk om slechts enkele verzoeken te proxyen. bypass kunt u een functie leveren die de retourwaarde bepaalt of het verzoek moet worden toegewezen of niet.

Ervan uitgaande dat u alleen POST-aanvragen voor /api webpack en webpack de rest wilt laten webpack uw configuratie er misschien zo uit

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