我正在创建一个应用程序，使用正在开发中的webpack dev server和react router.
webpack dev server似乎是基于这样一个假设构建的:您将在一个地方(即"/")拥有一个公共入口点，而react router允许无限量的入口点.
我想要webpack dev服务器的好处，尤其是热重新加载功能，这对提高工作效率非常重要，但我仍然希望能够加载react router中设置的路由.
如何实现这一点，使他们共同工作？你能在webpack dev服务器前面运行一个express服务器，这样就允许了吗？
我设置了一个代理来实现这一点:
您有一个提供索引的常规express Web服务器.任何路由上的html，除非是资源路由.如果它是一个assets资源 ，请求将被代理到web开发服务器
您的react热入口点仍将直接指向webpack dev服务器，因此热重新加载仍然有效.
假设您在8081上运行webpack dev server，在8080上运行代理.你的服务器.js文件将如下所示:
"use strict";
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./make-webpack-config')('dev');
var express = require('express');
var proxy = require('proxy-middleware');
var url = require('url');
## --------your proxy----------------------
var app = express();
## proxy the request for static assets
app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
# -----your-webpack-dev-server------------------
var server = new WebpackDevServer(webpack(config), {
contentBase: __dirname,
hot: true,
quiet: false,
noInfo: false,
publicPath: "/assets/",
stats: { colors: true }
});
## run the two servers
server.listen(8081, "localhost", function() {});
app.listen(8080);
现在在网页包配置中设置入口点，如下所示:
entry: [
'./src/main.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8081'
]
注意，直接调用8081进行热重新加载
还要确保将绝对url传递给output.publicPath选项:
output: {
publicPath: "http://localhost:8081/assets/",
// ...
}