带有后端api的webpack-dev-server

Question

我正在使用webpack-dev-server作为angularjs应用程序，我从package.json中的任务开始，如下所示：

  "scripts": {
    "start-api": "node api/server.js",
    "dev": "webpack-dev-server --env dev --history-api-fallback --inline --progress --port 5000",
    "start": "npm run dev"
  },

我有一个后端api服务器，它使用koa并在同一个端口上运行：

const koa = require('koa');

app.listen(5000);

module.exports.app;

当koa服务器启动时，它会拦截所有请求，我无法浏览角度浏览器应用程序。

我应该从koa服务还是有办法让两者一起工作？

Answer 1

是的，您可以将webpack-dev-server与您自己的后端API一起使用。 有两种方法可以做到这一点：

首先，您可以将dev-server配置为使用代理 。 这是我使用的解决方案，它对我很有用。 我的配置看起来像这样：

proxy: {
  "/api/*": {
    target: "http://localhost:8080"
  }
}

此配置确保以“/ api”开头的所有请求都发送到后端API服务器（在本例中为localhost：8080），而不是dev-server。 （可选）如果需要，可以使用函数绕过代理，如下所示：

proxy: {
  "/api/*": {
    target: "http://localhost:8080",
    bypass(req, res) {
      return (/* some condition */) ? '/index.html' : false;
    }
  }
}

但我从来不需要使用它，因为“/ api / *”键是我需要确保将每个请求发送到正确的服务器。

重要的是，您应该让两台服务器在不同的端口上运行。 我通常使用8080作为后端，9090作为开发服务器。