网页包开发服务器&x2B；Express Web服务器

我无法设置同时执行以下两项任务的开发工作流：

在文件更改时重新编译静态资产（js、css）。为这些静态资产提供服务。通知浏览器，无论何时更改资源，都必须重新加载页面。使用反应热加载器

使用express运行服务器，该服务器提供静态资产将“消耗”的API。每当我的服务器文件发生更改时，请重新启动此express服务器

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

---

我并不反对使用gulp和browserify或SystemJS来代替webpack，但如果我想使用react hot loader，我需要使用webpack。

我们去年一直在使用gulp+webpack，这非常好。我们有一个API网关，它只提供一个静态html文件（index.html），其他所有东西都只是REST端点。然后在index.html中，我们引用一两个css文件和从CDN（Cloudfront）加载的两个脚本

如果在生产环境中以这种方式运行，您的本地安装程序只需要将webpack dev服务器用作“本地CDN”。如果您是正确的，您的javascript将需要知道api url是什么，因为这将改变本地与生产。实际上，我们有本地、开发、阶段和生产—一旦您将其设置为在两个环境中工作，就不难添加更多（这很好！）

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

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

var siteConfig={
apiBase:“”，
cdnBase:'
};

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

一种稍微简单一点的方法是，当页面被提供时，您可以在构建时填充这些变量。我们就是这样开始的，但随着事情的发展，在运行时管理起来更容易

---

顺便说一句，我很确定你可以用网页包来完成所有这一切——gulp可能没有必要，但我们当时使用gulp来运行单元测试、linting等更容易些。

你可以这样做：

• 创建一个express（）代理
• 创建Web包开发服务器
• 使用绝对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);

---

您使用什么命令启动开发服务器？网页包开发服务器？如果是这样，您是否使用另一个命令来启动RESTAPI服务器？理想情况下，它们应该是一个命令。github上有这样做的样板吗？我终于找到了一个：这是否适用于热模块替换（HMR）？我们正在代理Webpack开发服务器路径的一部分，但不是整个域，所以我不知道它如何获得WebSockets连接。