webpack
Server di sviluppo: webpack-dev-server

Installazione

webpack-dev-server può essere installato tramite npm

npm --save-dev webpack-dev-server

ora puoi avviare il server

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

Per semplificare l'utilizzo è possibile aggiungere script a package.json

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

ora per eseguire il server è possibile utilizzare

npm run start

webpack-dev-server è configurato nel file webpack.config.js nella sezione devServer .

Per cambiare la directory base del contenuto del server è possibile utilizzare l'opzione contentBase . Esempio di impostazione della directory root di impostazione su public_html potrebbe essere simile

let path = require("path");

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

Utilizzo del proxy

webpack-dev-server può delegare alcune richieste ad altri server. Questo potrebbe essere utile per lo sviluppo di client API quando si desidera inviare richieste allo stesso dominio.

Il proxy è configurato tramite parametro proxy .

La configurazione di esempio del server dev che passa richieste a /api ad altri servizi di ascolto sulla porta 8080 potrebbe apparire come questa

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

riscrivere

È possibile riscrivere il percorso di destinazione usando pathRewrite opzione pathRewrite .

Supponendo di voler togliere /api prefisso /api dall'esempio precedente potrebbe essere la tua configurazione

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

Request /api/user/256 verrà convertito in http://localhost:8080/user/256 .

filtro

È possibile proxy solo alcune richieste. bypass consente di fornire una funzione il cui valore di ritorno determinerà se la richiesta deve essere inoltrata o meno.

Supponendo di voler solo proxy solo le richieste POST a /api e lasciare che il webpack gestisca il resto la configurazione potrebbe apparire come questa

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