Question

我在设置可同时执行以下两项任务的开发工作流程时遇到问题：

在文件更改时重新编译静态资产（js，css）。服务这些静态资产。通知浏览器，只要资产发生更改，页面就必须重新加载。使用react-hot-loader。
使用express运行服务器，该服务器提供静态资产将消耗的API＃34;。每当我的服务器文件发生变化时，都要重新启动此服务器。

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

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

Answer 1

您可以这样做：

创建快速（）代理
创建webpack-dev-server
使用绝对网址链接资产
启动两台服务器。

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

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

Answer 2

去年我们一直在使用gulp + webpack，它一直很棒。我们有一个API网关，它只提供一个静态html文件（index.html），其他一切只是REST端点。然后在index.html中引用一个或两个css文件以及从我们的CDN（Cloudfront）加载的几个脚本。

如果您在生产中以这种方式运行，则本地设置只需使用webpack dev服务器作为“本地CDN”。你是对的，你的javascript将需要知道api url是什么，因为这将改变本地vs生产。我们实际上有本地，开发，舞台和制作 - 一旦你设置在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调用中。根据你的环境交换变量，bam，你已经完成了！

一种稍微简单的方法是在提供页面时填写这些变量，而不是在构建时完成。这就是我们如何开始，但随着事情的发展，它在运行时变得更容易管理。

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

Webpack Dev Server + Express Web Server

2 个答案: