Webpack Dev Server + Express Web Server

Question

我在设置开发工作流程时遇到问题,该工作流程将同时执行以下两个任务:

1. 在文件更改时重新编译静态资产(js,css).服务这些静态资产.通知浏览器,只要资产发生更改,页面就必须重新加载.使用react-hot-loader.
2. 使用express来运行服务器,该服务器提供静态资产将"消耗"的API.每次我的服务器文件更改时都要重新启动此Express服务器.

最好的做法是让webpack-dev-server服务于静态资产,并且有一个单独的Web服务器在不同的端口上提供API吗？如果是这样,javascript中的API调用将需要指定主机和端口,并且需要在进入生产之前进行更改.似乎所有在线教程都关注#1,并且没有设置API服务器.谁能指出我正确的方向？

我并不反对使用gulp和browserify或SystemJS而不是webpack,但似乎如果我想使用react-hot-loader,我需要使用webpack.

Answer 1

去年我们一直在使用 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 可能不是必需的，但当时对我们来说使用 gulp 来运行单元测试、linting 等更容易。