webpack
Servidor de desarrollo: webpack-dev-server

Instalación

webpack-dev-server se puede instalar a través de npm

npm --save-dev webpack-dev-server

ahora puedes iniciar el servidor

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

Para simplificar el uso, puede agregar un script a package.json

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

ahora para ejecutar el servidor puede utilizar

npm run start

webpack-dev-server está configurado en el archivo webpack.config.js en la sección devServer .

Para cambiar el directorio de base de contenido del servidor puede usar la opción contentBase . La configuración de ejemplo del directorio raíz a public_html podría verse como

let path = require("path");

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

Usando proxy

webpack-dev-server puede webpack-dev-server algunas solicitudes a otros servidores. Esto puede ser útil para desarrollar el cliente API cuando desee enviar solicitudes al mismo dominio.

El proxy se configura a través del parámetro proxy .

La configuración de ejemplo del servidor dev que envía solicitudes a /api a otro servicio que escucha en el puerto 8080 podría tener este aspecto

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

volver a escribir

Es posible volver a escribir la ruta de destino usando la opción pathRewrite .

Suponiendo que desea eliminar el prefijo /api del ejemplo anterior, su configuración puede parecer

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

La solicitud /api/user/256 se convertirá a http://localhost:8080/user/256 .

filtrar

Es posible presentar solo algunas solicitudes. bypass permite proporcionar una función cuyo valor de retorno determinará si la solicitud debe ser proxy o no.

Suponiendo que solo desea webpack proxy solo las solicitudes POST a /api y dejar que el webpack encargue del resto, su configuración podría tener este aspecto

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