J'utilise webpack et le HtmlWebpackPlugin pour injecter js et css groupés dans un fichier de modèle html.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
Et il produit le fichier html suivant.
<!doctype html>
<html lang="en">
<head>
...
<link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="main-295c5189923694ec44ac.min.js"></script>
</body>
</html>
Cela fonctionne bien lorsque vous visitez la racine de l'application localhost:3000/
, mais échoue lorsque j'essaie de visiter l'application à partir d'une autre URL, par exemple, localhost:3000/items/1
car les fichiers regroupés ne sont pas injectés avec un chemin absolu. Lorsque le fichier html est chargé, il recherchera le fichier js dans le /items
répertoire non-exist car react-router n'a pas encore été chargé.
Comment puis-je demander à HtmlWebpackPlugin d'injecter les fichiers avec un chemin absolu, afin qu'Express les recherche à la racine de mon /dist
répertoire et non à /dist/items/main-...min.js
? Ou peut-être puis-je modifier mon serveur express pour contourner le problème?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
Essentiellement, j'ai juste besoin d'obtenir la ligne:
<script src="main...js"></script>
pour avoir une barre oblique au début de la source.
<script src="/main...js></script>
output.publicPath = '/'
était la solution.