Webpack Dev Server：将一些根 URL 路由到外部主机答案

【问题标题】：Webpack Dev Server: route some root URL's to a external hostWebpack Dev Server：将一些根 URL 路由到外部主机
【发布时间】：2019-01-01 18:04:27
【问题描述】：

我有一个使用 webpack 开发服务器在 localhost 上开发的 React 应用程序。

应用程序中有 <a /> 链接引用应用程序外部的 URL，但在应用程序的同一主机上运行（一旦部署）。

因此，当我在 localhost 上进行开发时，如果我单击其中一个 url，它将带我到 http://localhost:8080/not-part-off-app，当我需要它时带我到 https://ourdomain.com/not-part-off-app。我以为我可以使用dev server proxy functionality，但是这些 URL 都在根目录上，我似乎无法让它工作（尝试了一堆不同的配置）。他们中的大多数要么在我单击链接时返回Error occurred while trying to proxy to: localhost:8080/not-part-off-app，要么在应用加载为http://localhost:8080/时返回一个http://localhost:8080/

我认为必须有某种方法可以让它发挥作用，但我无法完全弄清楚。

代码：

devServer: {
    proxy: {
      '/': 'https://ourdomain.com'
    }
  }

【问题讨论】：

想知道使用setup 来实现这一点是否更容易（并且只为我的重定向路径使用正则表达式？）
试试这个proxy: { '/not-part-off-app': { target: 'http://ourdomain.com/not-part-off-app'' } }代理/恐怕不行。因为这是您的应用所在的位置。
即使可以将您的应用挂载到更具体的路线（我不确定是否可行），代理 / 也会捕获所有内容。
@IvanYurov 是的，我必须得到更多的自定义......原来before 配置适合这种类型的东西。基本上添加可以检查 URL 并在需要时重定向的中间件（参见下面的解决方案）。

标签： webpack webpack-dev-server

【解决方案1】：

我可以通过使用before configuration：

module.exports = {
  //...
  devServer: {
    before: function(app) {
      app.get('/*', function(req, res, next) {
        //do whatever to match url
        if(req.url.indexOf('/not-part-off-app') === -1){
          return next();
        }
        res.redirect(`https://ourdomain.com${req.url}`);
      });
    }
  }
};

【讨论】：