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

Question

我正在使用 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 支持这个问题的正则表达式，但我无法从官方文档中获得解决方案:(

Answer 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, '') }
}]

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

希望这对您有所帮助!