J'ai mis en place un proxy pour y parvenir:
Vous disposez d'un serveur Web express régulier qui sert l'index.html sur n'importe quel itinéraire, sauf s'il s'agit d'un itinéraire d'actif. s'il s'agit d'un actif, la requête est envoyée par proxy au serveur web-dev-server
vos points d'entrée réactifs pointeront toujours directement vers le serveur de développement webpack, donc le rechargement à chaud fonctionne toujours.
Supposons que vous exécutiez webpack-dev-server sur 8081 et votre proxy sur 8080. Votre fichier server.js ressemblera à ceci:
"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);
maintenant, créez vos points d'entrée dans la configuration du webpack comme ceci:
entry: [
'./src/main.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8081'
]
notez l'appel direct au 8081 pour hotreload
assurez-vous également de transmettre une URL absolue à l' output.publicPath
option:
output: {
publicPath: "http://localhost:8081/assets/",
// ...
}