的WebPack开发服务器+高速Web服务器

Question

我无法建立一个开发流程，将两者都做的同时以下任务：

1. 重新编译静态资产（JS，CSS）的文件更改。为这些静态资产提供服务。通知浏览器该页面必须在资产发生变化时重新加载。使用react-hot-loader。
2. 使用express来运行服务器，该服务器为静态资产将“消耗”的API提供服务。任何时候我的服务器文件发生变化时，请让此快速服务器重新启

使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 dev服务器作为“本地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> 

然后你只需拉siteConfig当你反应过来的应用程序正在启动，在前面加上这些变量的任何API/CDN呼叫。根据你的环境交换变量，然后bam，你就完成了！

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

BTW，我敢肯定，你可以做到这一切只需使用的WebPack的 - 一饮而尽可能不是必要的，但它在使用一口运行单元测试，掉毛的时间对我们来说更容易，等

Answer 2

你可以做这样的事情：

• 创建快递（）代理
• 创建的WebPack-DEV-服务器
• 链接与绝对URL
• 启动BOT资产h服务器。

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

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