可选信息：我正试图让这个项目使用marty.js和webpack-dev-server构建，允许来自react路由器的入口点，这样它就不仅仅在\路径中工作。
因此，我整天都在研究THIS堆栈溢出答案，但我不理解下面代码背后的逻辑以及为什么这个答案有效。
retozi回答：
我建立了一个代理来实现这一点：
您有一个常规的express Web服务器，它在任何>路由上为index.html提供服务，除非是资产路由。如果是资产，则请求会被代理到web开发服务器
react热入口点仍然直接指向webpack-dev服务器，因此热重新加载仍然有效。
假设您在8081上运行webpack-dev服务器，在8080上运行代理。
我的代码现在看起来是这样的，但为了使它发挥作用，我稍后需要实现marty-express。为了实现这一点，我必须首先了解雷顿齐斯的答案。
express.js文件
要求
'use strict';
var express = require('express');
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');
var config = require('../config.json');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var proxy = require('proxy-middleware');
var url = require('url');
代理
var app = express(); //our express instance
// -------- my proxy----------------------
app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));//but why do we need a proxy? This line really confuses me.
marty express**
我计划在理解这个例子后立即使用它，我只是希望它能通过反应路线进入快递。**
//app.use(require('marty-express')({
// routes: require('../routes'),
// application: require('../application').Application
//}));
快递
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/index.html');
});//if I got this straight this line just tells express to server my index.html file to all routes. My guess is this will be removed when I implement [marty-express][4].
两个服务器webpack开发服务器和express
//----- my-webpack-dev-server------------------
var webpackServer = new WebpackDevServer(webpack(require('../../webpack.config')), {
contentBase: __dirname,
hot: true,
quiet: false,
noInfo: false,
publicPath: '/assets/',
stats: { colors: true }
});
//run webpack hot reload server on port 8081
webpackServer.listen(8081, 'localhost', function() {});
//run express server on port 8080
app.listen(8080);
有人能像我昨天从火星上下来一样向我解释这一点吗？
我不明白两件事：
- 为什么我们需要代理
- 如何将反应路线转换为快递，以便在被要求时在每条路线上为他们提供服务。（pehaps marty express帮助我们完成这项任务，但我猜如果没有它，我们可以手动完成）
啊。。。帮我摆脱文档匮乏的困境！！！请慷慨回答。。记住，我昨天刚从火星上来。
谢谢。。！
你没有，但这很棘手。因此，第一个要求是您有一个可配置的资产根。如果您将来需要CDN，这也会得到回报。假设这是在一个envvar ASSET_URL中，该URL在运行webpack开发服务器和express服务器时都可用。
您需要通常的webpack-dev服务器，再加上CORS头。这样，您的主express服务器就可以在script/link标记中指向webpack-dev服务器。
ASSET_URL类似于：http://localhost:8081
Webpack
var config = require('./webpack.config');
var port = '8081', hostname = 'localhost';
if (process.env.ASSETS_URL) {
var assetUrlParts = url.parse(process.env.ASSETS_URL);
port = assetUrlParts.port;
hostname = assetUrlParts.hostname;
}
new WebpackDevServer(webpack(serverConfig), {
publicPath: serverConfig.output.publicPath,
hot: true,
headers: { "Access-Control-Allow-Origin": "*" }
}).listen(port, 'localhost', function (err, result) {
if (err) {
console.log(err);
process.exit(1);
}
console.log('Listening at ' + url.format({port: port, hostname: hostname, protocol: 'http:'}));
});
然后在你的webpack配置文件中，你有大部分相同的垃圾。
var port = '8081', hostname = 'localhost';
if (process.env.ASSETS_URL) {
var assetUrlParts = url.parse(process.env.ASSETS_URL);
port = assetUrlParts.port;
hostname = assetUrlParts.hostname;
}
...
entry: [
'webpack-dev-server/client?' + url.format({port: port, hostname: hostname, protocol: 'http:'}),
'webpack/hot/only-dev-server',
...
output: {
path: __dirname + '/public/',
filename: 'bundle.js',
publicPath: process.env.ASSETS_URL || '/public/'
Express服务器
这里唯一特别的是，您需要以某种方式将process.env.ASSETS_URL放入模板的本地。
<head>
<link rel="stylesheet" href="{{ assetsUrl }}/main.css">
</head>
<body>
...
<script type="text/javascript" src="{{ assetsUrl }}/bundle.js"></script
</body>