如何使用 webpack 部署 Express + React 应用

Question

我有一个使用 webpack-dev-server 进行开发的项目。我想使用一个快速服务器部署应用程序，该服务器将通过 Pug 模板提供其内容，或者只是在运行生产webpack 时由 HtmlWebpackPlugin 生成的静态 HTML 页面。当前设置：

 ──┬ ????  dist
 | └──┬ ????  server
 | |  └──┬ ????  views // moved by CopyWebpackPlugin
 | |  |  ├─── ????  error.pug
 | |  |  └─── ????  index.pug
 | |  ├─── ????  index.js // bundled server
 | ├─── ????  bundle.js   // bundled front-end
 | ├─── ????  index.html  // produced by HtmlWebpackPlugin
 └───── ????  root.710...2.css
...

 ───┬ ????  src
 |  └──┬ ????  js
 |  |  ├─── ????  app.jsx 
 |  └──┬ ????  server
 |  |  └──┬ ????  routes
 |  |  |  ├─── ????  index.js  // route that might? serve index.pug
 |  |  |  ├─── ????  routes.js // routes to other endpoints hit by front end code
 |  |  └──┬ ????  views
 |  |  |  ├─── ????  error.pug
 |  |  |  └─── ????  index.pug // HtmlWebpackPlugin given this as template path
 |  |  ├─── ????  app.js // express server
 |  └──┬ ????  styles
 └─────└─── ????  main.scss

Webpack 将我的服务器和前端组件捆绑到 dist/server/index.js 和 dist/bundle.js 中。服务器提供了一些前端 XHR 访问某些数据的路由。我正在努力部署此代码的规范方式是什么，以便我可以使用模板页面显示来自路径的一些变量信息（例如，error.pug 获取一些数据，如{code: 404}）以及哈希由 HtmlWebpackPlugin 生成，提供类似于filename: '[name].[hash].bundle.js' 生成的 URL。

快递服务器不应该尝试根据环境提供索引吗？

if (process.env.NODE_ENV === 'production') {
  router.get('/', (req, res) => {
    res.render('index')
  })
}

如果是这样，pug 模板应该如何使用[name].[hash].bundle.js？ pug 文件是否应该仅用于错误页面？是否应该是一个完全不同的 Express 服务器来提供索引/错误页面，而不是提供前端使用的 API 数据的服务器？

为生产生产快速服务器以服务捆绑的 React 应用程序的规范最佳实践是什么？

Answer 1

最好是这样有一个 dist

/dist
  /client
    root.710...2.css
    bundle.js
    index.html
  /server
    /views
      error.pug
      index.pug
    index.js

然后让您的快速服务器（或 nginx）为客户端文件夹提供服务。 app.use(express.static('/path/to/your/dist/client'));