WebPack：访问客户端代码中的节点环境变量

Question

我正在使用Webpack开发一个项目来打包我的客户端JavaScript和CSS。它启动一个服务器，所以我可以做热重装和其他巧妙的技巧。因此，当我调试我的应用程序时，webpack服务器正在localhost：3000上运行。我还使用nodemon启动另一个Web服务器来托管我的API调用。它显然无法在同一个端口上运行，因此我必须在端口3002上启动它。

我已经设置了一个节点环境变量，它告诉我的api它应该托管什么端口。我需要以某种方式访问​​我的客户端脚本中的相同环境变量，以便我的ajax调用知道他们需要调用哪个端口。

在我开始使用webpack之前，我正在从同一个端口托管我的api和我的客户端代码，我可以像这样进行api调用＆＃39; controller / action＆＃39;。现在我将它们托管在基本上两个不同的域中，我需要告诉我的api调用包含端口的完全限定的URL。即：＆＃39;主机：端口/控制器/动作＆＃39;。我知道我还需要在我的API服务器上配置CORS。

当我将其推向生产时，我将再次托管来自同一域的客户端文件和API调用，因此我将能够继续进行相对api调用＆＃39; controller / action＆＃39;。因此，我需要从客户端代码访问环境变量，以便我可以确定如何在生产环境中的Dev verses中形成api调用。

Answer 1

也许webpack devServer proxy值得追求。

devServer: {
...
  proxy: {
    '*/controller/*': {
      target: 'http://localhost:3002'
  }
}

客户仍然幸福地不知道开发/生产之间的差异。