webpack
Сервер разработки: webpack-dev-сервер

Монтаж

webpack-dev-server можно установить через npm

npm --save-dev webpack-dev-server

теперь вы можете запустить сервер

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

Чтобы упростить использование, вы можете добавить скрипт в package.json

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

теперь для запуска сервера вы можете использовать

npm run start

webpack-dev-server настроен в файле webpack.config.js в разделе devServer .

Чтобы изменить базовый каталог содержимого сервера, вы можете использовать опцию contentBase . Пример настройки корневого каталога конфигурации в public_html может выглядеть так:

let path = require("path");

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

Использование прокси

webpack-dev-server может проксировать некоторые запросы на другие серверы. Это может быть полезно для разработки API-клиента, когда вы хотите отправлять запросы в тот же домен.

Прокси настраивается через параметр proxy .

Пример конфигурации сервера dev, передающего запросы в /api для другой службы, прослушивающей порт 8080, может выглядеть так:

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

перезапись

Можно переписать путь назначения с pathRewrite параметра pathRewrite .

Предполагая, что вы хотите префикс strip /api из предыдущего примера, ваша конфигурация может выглядеть так:

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

Запрос /api/user/256 будет преобразован в http://localhost:8080/user/256 .

фильтр

Можно проксировать только некоторые запросы. bypass позволяет вам предоставлять функцию, возвращаемое значение которой будет определять, следует ли проксировать запрос.

Предполагая, что вы хотите проксировать только POST-запросы в /api и пусть webpack обрабатывает остальные, ваша конфигурация может выглядеть так:

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