Eu configurei um proxy para conseguir isso:
Você tem um servidor da web expresso regular que serve o index.html em qualquer rota, exceto se for uma rota de ativo. se for um ativo, a solicitação é enviada por proxy para o web-dev-server
seus pontos de entrada react hot ainda apontarão diretamente para o servidor de desenvolvimento webpack, então o hot recarregamento ainda funciona.
Vamos supor que você execute webpack-dev-server em 8081 e seu proxy em 8080. Seu arquivo server.js será semelhante a este:
"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);
agora faça seus pontos de entrada na configuração do webpack assim:
entry: [
'./src/main.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8081'
]
observe a chamada direta para 8081 para hotreload
também certifique-se de passar um url absoluto para a output.publicPath
opção:
output: {
publicPath: "http://localhost:8081/assets/",
// ...
}