J'utilise webpack et HtmlWebpackPlugin pour injecter des fichiers js et css 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 correctement lorsque vous visitez la racine de l'application localhost:3000/
, mais échoue lorsque j'essaie de visiter l'application depuis une autre URL, par exemple localhost:3000/items/1
, car les fichiers fournis ne sont pas dotés d'un chemin absolu. Lorsque le fichier html est chargé, il recherche le fichier js dans le répertoire non-existant /items
car le routeur réact-routeur n'a pas encore été chargé.
Comment puis-je obtenir que HtmlWebpackPlugin injecte les fichiers avec un chemin absolu, alors Express les recherchera à la racine de mon répertoire /dist
et non à /dist/items/main-...min.js
? Ou peut-être que je peux changer 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, je dois juste comprendre la ligne:
<script src="main...js"></script>
avoir une barre oblique au début de la source.
<script src="/main...js></script>
Essayez de définir publicPath dans la configuration de votre pack Web:
output.publicPath = '/'
HtmlWebpackPlugin utilise publicPath pour préfixer les URL des injects.
Une autre option consiste à définir la base href dans le <head>
de votre modèle html, afin de spécifier l'URL de base de toutes les URL relatives de votre document.
<base href="http://localhost:3000/">
En fait, je devais mettre:
output.publicPath: './';
afin de le faire fonctionner dans un chemin non-ROOT . En même temps, je injectais:
baseUrl: './'
dans
<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
Avec les deux paramètres définis, cela a fonctionné comme un charme.
dans la configuration webpack
config.output.publicPath = ''
dans votre index.html
<base href="/someurl/" />
cela devrait le faire.