可选信息:我正在尝试制作 this project使用 marty.js 构建和webpack dev server允许来自 react-router 的入口点这样它就不仅仅适用于\路径。
因此，我正在学习THIS整天回答堆栈溢出问题，我无法理解以下代码背后的逻辑以及为什么这个答案有效。
retozi 回答:
I set up a proxy to achieve this:
You have a regular express webserver that serves the index.html on any > route, except if its an asset route. if it is an asset, the request gets proxied to the web-dev-server
your react hot entrypoints will still point directly at the webpack dev server, so hot reloading still works.
Let's assume you run webpack-dev-server on 8081 and your proxy at 8080.
我的代码现在看起来像这样，但为了使其工作，我稍后需要实现 marty-express 。为了实现这一点，我必须首先理解 retonzis 的答案。
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 **
我打算在理解这个例子后立即使用它，我只是希望它将 react 路由传递到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].
2 个服务器 webpack-dev-server 和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);
有人可以像我昨天从火星上下来一样向我解释这个概念吗？
我不明白两件事:
- 为什么我们需要代理
- 如何将react-routes传递到express中，以便在询问时在每条路线上为它们提供服务。 (pehaps marty-express 帮助我们完成这项任务，但我猜我们可以在没有它的情况下手动完成这项任务)
啊...帮助我摆脱文档稀缺的困境!!!请慷慨地回答.. 请记住，我昨天刚从火星回来。
谢谢你..!
最佳答案
你不知道，但这很棘手。所以第一个要求是你有一个可配置的 Assets 根。如果您将来需要 CDN，这也会带来返回。假设它位于环境变量 ASSET_URL 中，在运行 Webpack 开发服务器和 Express 服务器时都可用。
您需要常用的 webpack 开发服务器以及 CORS header 。这让你的主 Express 服务器只需指向 script/link 标签中的 webpack 开发服务器。
ASSET_URL 类似于:http://localhost:8081
网络包
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>
关于express - 为什么我们需要在express.js服务器上使用代理才能获得与react-routing相结合的webpack热重载服务器功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31091702/