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的衍生产品。

文档说，您可以在重写道具上使用一个函数来完成一些复杂的正则表达式工作。结合定义多个代理条目和上下文条目的功能，我将提出以下建议：

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

这会将您不断增长的列表减少到一个阵列中。

希望这会有所帮助！

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

1 个答案: