如何使用Webpack部署Express + React應用

Question

我有一個使用webpack-dev-server開發的項目。 我想使用將通過Pug模板或僅由HtmlWebpackPlugin在運行生產webpack時生成的靜態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生成的散列，其URL類似於filename: '[name].[hash].bundle.js'生成的URL filename: '[name].[hash].bundle.js' 。

快遞服務器是否應該不嘗試根據環境來服務索引？

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

如果是這樣，哈巴狗模板應該如何使用[name].[hash].bundle.js ？ pug文件應該僅用於錯誤頁面嗎？ 是否應該完全是與提供前端使用的API數據的服務器提供索引/錯誤頁面的Express服務器完全不同？

為生產捆綁在一起的React應用的快遞服務器生產的最佳規范是什么？

Answer 1

更好的辦法是這樣

/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'));