如何连接webpack开发服务器到快递？

Question

我正在运行一个express和create-react-app应用程序。它们在开发过程中是独立的实体，express只是一个端点，我们通过package.json proxy: 'http://localhost:5000中的“proxy”字段进行通信。在生产过程中，我运行yarn build，并在Express中通过catch-all-route提供构建文件夹内的静态index.html。

// RENDER REACT STATIC INDEX.HTML FROM BUILD
if(process.env.NODE_ENV === 'production') {
  app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '../client/build', 'index.html'))
  })
}

好的，因此，在生产和开发过程中存在巨大的差异。例如，如果我在production期间导航到/pages/plainhtmlfile，我可以在路由匹配的情况下提供.EJS文件。因为在生产期间，只有快速运行，它提供静态文件，包括React构建文件夹index.html。

//THIS WORKS DURING PRODUCTION, NOT WORKING DURING DEVELOPMENT.
app.get('/plainhtmlfile', (req, res) => {
  res.render('nonreactpage')
})

如何在可能的情况下进行开发，为“/plainthtmlfile”提供服务？现在，create-react-app是一个独立的进程，在开发期间运行在端口3000和快速端口5000上。

Answer 1

使用webpack-dev-server代理它在开发环境中工作，将URL重定向到您所指向的服务器。

例如，您的配置应如下所示，因为express服务器位于端口5000

proxy: {
  "/plainhtmlfile": "http://localhost:5000"
}

键可以包含通配符，因此此键将重定向所有以/api/开头的URL

proxy: {
  "/api/**": "http://localhost:5000"
}

https://webpack.js.org/configuration/dev-server/#devserverproxy