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

Question

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

在文件更改时重新编译静态 Assets (js、css)。为这些静态 Assets 提供服务。通知浏览器在更改 Assets 时必须重新加载页面。使用 react 热加载器。

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

让 webpack-dev-server 为静态 Assets 提供服务，并让单独的 Web 服务器在不同的端口上为 API 提供服务是最佳实践吗？如果是这样，javascript 中的 API 调用将需要指定主机和端口，并且需要在投入生产之前进行更改。似乎所有在线教程都专注于 #1，并且没有设置 API 服务器。任何人都可以指出我正确的方向吗？

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

Answer 1

你可以这样做:

创建一个 express() 代理

创建一个 webpack-dev-server

使用绝对网址链接 Assets

启动两个服务器。

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

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