web-dev-qa-db-fra.com

HtmlWebpackPlugin injecte des fichiers de chemin relatif qui se cassent lors du chargement de chemins de site Web non root

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>
javascriptexpresswebpackreact-router
83
aherriot

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/">
143
Magnus Sjungare

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.

12
Kevin FONTAINE

dans la configuration webpack 

config.output.publicPath = ''

dans votre index.html 

<base href="/someurl/" />

cela devrait le faire.

0
hannad rehman