Webpack开发服务器 + Express Web服务器

Question

我在设置开发流程时遇到了麻烦，需要同时完成以下两个任务：

1. 当文件更改时重新编译静态资源（js、css），提供这些静态资源，通知浏览器每当资源更改时页面必须重新加载。使用 react-hot-loader。
2. 使用 express 运行服务器来提供静态资源“消费”的 API。每当服务器文件更改时都要重新启动此 express 服务器。

最佳实践是使用 webpack-dev-server 服务提供静态资源，然后在不同的端口上运行另一个 web 服务器来提供 API 吗？如果是这样，JavaScript 中的 API 调用将需要指定主机和端口，并且在进入生产之前需要进行更改。似乎所有在线教程都专注于第一点，并未建立 API 服务器。能否为我指明正确的方向？

我不反对使用 gulp 和 browserify 或 SystemJS 而非 webpack，但似乎如果我想使用 react-hot-loader，就必须使用 webpack。

- Dave

---

有没有在 GitHub 上做这件事的任何样板文件？ - bdavidxyz

我终于找到了一个：https://github.com/cgreening/simple-webpack-react-starter - bdavidxyz

Answer 1

你可以像这样做：

• 创建一个express()代理
• 创建一个webpack-dev-server
• 使用绝对URL链接资源
• 启动两个服务器。

注意：确保有不同的端口来运行这两个服务器。

var proxy = require('proxy-middleware');
var express = require('express');
var url = require('url');

//----------------- Web Proxy--------------------
var app = express();
app.use('/assets', proxy(url.parse('http://localhost:8000/dist/assets')));
app.get('/api/url', function(req, res) {}
app.post('/api/url', function(req, res) {}

// ---------------Webpack-dev-server---------------------
var server = new WebpackDevServer(webpack(config), config.devServer);

// ---------------Run both servers-----------------------
server.listen(config.port, 'localhost', function(err) {});
app.listen(8080);

- axiomtheorem

---

这个能和热模块替换（HMR）一起工作吗？我们正在代理Webpack Dev Server的部分路径，但并没有代理整个域名，所以我不知道它如何获取WebSockets连接。 - Kevin Ghadyani

Answer 2

我们过去一年一直在使用gulp+webpack，效果非常好。我们有一个API网关，只提供一个静态的HTML文件（index.html），其他所有内容都是REST端点。然后在index.html中，我们引用了一个或两个CSS文件和几个从我们的CDN（Cloudfront）加载的脚本。

如果您在生产环境中运行这种方式，您的本地设置只需要使用webpack开发服务器作为您的“本地CDN”。您是正确的，您的JavaScript将需要知道API URL，因为这会在本地与生产环境中发生变化。实际上，我们有本地、开发、阶段和生产环境——一旦您将其设置为在2个环境中工作，添加更多环境并不难（这很好！）

现在我们的index.html有一些模板变量，在API网关提供服务时填充。类似于这样：

<script>
  var siteConfig = {
    apiBase: '<%=apiBaseUri%>',
    cdnBase: '<%=cdnBaseUri%>'
  };
</script>
<script src="<%=cdnBaseUri%>/assets/js/bundle.min.js"></script>

然后，当您的React应用程序启动时，只需拉入siteConfig并将这些变量前置到任何api / cdn调用中。根据您的环境交换变量，完成！

一个稍微简单的方法是，在页面提供服务时不填写这些变量，而是在构建时进行填写。这就是我们开始使用的方式，但随着事情的发展，管理运行时变得更容易。

顺便说一句，我相信您可以仅使用webpack来完成所有这些操作-可能没有必要使用gulp，但是在当时为了运行单元测试、linting等，使用gulp更容易。

- Ryan

---

你用什么命令启动开发服务器？是webpack-dev-server吗？如果是，那么你是否使用另一个命令来启动REST api服务器？理想情况下，它们应该是一个单一的命令。 - Dave