webpack-dev-middleware 在与应用不同的端口上提供服务包答案

【问题标题】：webpack-dev-middleware serving bundle on different port than appwebpack-dev-middleware 在与应用不同的端口上提供服务包
【发布时间】：2016-10-04 16:10:11
【问题描述】：

我一直在研究利用 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？

【问题讨论】：

为什么一开始就有两个独立的 Express 服务器？
一个用于执行服务器端（预）渲染，另一个仅用于开发目的，不用于生产。
我自己都使用一个 Express 服务器（仅在不生产时加载 Webpack 中间件）。

标签： javascript node.js express webpack webpack-dev-middleware

【解决方案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);
});

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

【讨论】：