如何有效地为多个 URL 配置 webpack 代理？答案

【问题标题】：How to configure a webpack proxy for multiple URLs efficiently?如何有效地为多个 URL 配置 webpack 代理？
【发布时间】：2019-12-22 12:43:11
【问题描述】：

我正在使用 webpack 开发服务器来构建单页应用程序。路由有很多/api、/alpha、/bravo.../zulu，都需要代理。

我编写了 webpack.config.js 文件来代理所有 URL。

proxy: {
  "/api": "http://localhost:3000",
  "/alpha": {
    target: "http://localhost:8080",
    pathRewrite: { "^/alpha": "" }
  },
  "/bravo": {
    target: "http://localhost:8080",
    pathRewrite: { "^/bravo": "" }
  },
  "/charlie": {
    target: "http://localhost:8080",
    pathRewrite: { "^/charlie": "" }
  },
  ...
  "/zulu": {
    target: "http://localhost:8080",
    pathRewrite: { "^/zulu": "" }
  },
}

它运行良好，但我不得不编写太多代码。我想知道有什么办法可以减少吗？我认为 webpack 支持这个问题的正则表达式，但我无法从官方文档中得到解决方案:(

【问题讨论】：

标签： webpack proxy webpack-dev-server

【解决方案1】：

Webpack 开发服务器的代理设置是从 https://github.com/chimurai/http-proxy-middleware#http-proxy-middleware-options 衍生而来的。

文档说您可以使用 rewrite 道具上的函数来执行一些复杂的正则表达式工作。再加上定义多个代理条目和上下文条目的能力，我建议如下：

proxy: [{
  "/api": "http://localhost:3000",
},{
  context: ['/alpha', '/bravo', '/charlie', '/zulu'],
  target: 'http://localhost:8080',
  rewrite: function (path, req) { return path.replace(/\/(.*?)/g, '') }
}]

这会将您不断增长的列表缩减为单个数组。

希望这会有所帮助！

【讨论】：