使用 webpack 提供/监控的 React UI 和 Node.js/Express 应用程序答案

【问题标题】：React UI and Node.js/Express app served/monitored with webpack使用 webpack 提供/监控的 React UI 和 Node.js/Express 应用程序
【发布时间】：2017-06-13 23:37:29
【问题描述】：

我是React 和Node 的新手，正在尝试设置一个工作环境。

我之前曾与Node.js/Express 一起工作过，我使用nodemon 来监视文件更改并重新启动我的应用程序。

另外，我最近开始使用React，并使用webpack dev server（特别是webpack-dev-server --content-base src --inline --hot --history-api-fallback）设置来监控文件更改并重新加载用户界面。

问题

现在，我想把它绑在一起。

我找到的第一个解决方案是：在特定端口上启动我的 node app，比如 3000，然后在 8080 端口上启动 webpack dev server，然后 proxy 向我的 backend app 的特定 URL 请求。

devServer: {
    proxy: {
        '/backend-api/': {
            target: {
                "host": "localhost",
                "protocol": 'http:',
                "port": 3000
            },
            ignorePath: false,
            changeOrigin: true,
            secure: false
        }
    }
},

它应该可以工作，但我觉得为单个应用程序启动两台服务器不合适。

有什么方法（以及我能理解的简单示例）来启动单个服务器同时服务：server side app 和React UI？

当然，它应该跟踪文件更改并在服务器代码更改时重新启动服务器应用程序，或者在客户端代码更改时重新加载 UI。

【问题讨论】：

标签： node.js reactjs express webpack

【解决方案1】：

你可以使用这个包通过 Express 中间件使用 webpack：https://github.com/webpack/webpack-dev-middleware

您只需将其添加到应用程序即可使用它：

var webpackMiddleware = require("webpack-dev-middleware");
app.use(webpackMiddleware(webpack({/* webpack options */})));

此外，还有一个基于此的包提供热加载和“Create React App”风格的终端显示：https://www.npmjs.com/package/webpack-express-middleware

【讨论】：

谢谢！抱歉花了这么长时间来标记您的答案:)