Webpack-dev-middleware在不同的端口上提供bundle服务

Question

我一直在开发一个利用Apollo-Client和GraphQL的React样板。我的应用程序是这样设置的，我有一个节点进程在端口3000上运行一个Express服务器，实际呈现应用程序，另一个Express服务器在端口3001上使用webpack-dev-middleware来打包和服务我的JavaScript包。

当我试图使用<script src="/static/js/bundle.js />加载我的包时，我得到了一个404，因为它试图在http://localhost:3000/static/js/bundle.js而不是http://localhost:3001/static/js/bundle.js请求包，在那里它实际上是由webpack-dev-middleware服务的。

是否有一种方法来配置webpack-dev-middleware或我的应用程序服务器，使我的应用程序可以从/static/js/bundle.js访问JS包，而不必在它前面加上http://localhost:3001 ?

Answer 1

您需要代理:3000/static/js/bundle.js到:3001/static/js/bundle.js的请求，您可以这样做:

const request = require('request');
...
app.get('/static/js/bundle.js', (req, res) => {
  req.pipe(request.get('http://localhost:3001/static/js/bundle.js')).pipe(res);
});

您必须确保此路由仅在开发期间添加。