如何连接 webpack 开发服务器来表达？

Question

我正在运行一个 express 和 create-react-app 应用程序。它们在开发过程中是独立的实体，而 express 只是我们通过 package.json 中的 'proxy' 字段进行通信的一个端点proxy: 'http://localhost:5000。在生产过程中，我yarn build通过 Express 中的 catch-all-route运行并提供 build 文件夹中的静态 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'))
  })
}

好吧，在生产和开发过程中存在巨大差异。例如，如果我在 期间导航到 /pages/plainhtmlfile production，如果路由匹配，我可以提供 .EJS 文件。因为在生产过程中只有 Express 运行，它提供静态文件，包括 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