Sto utilizzando webpack e HtmlWebpackPlugin per iniettare js e css in un file modello HTML.HtmlWebpackPlugin inserisce file di percorso relativi che si interrompono durante il caricamento dei percorsi del sito Web non root
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
E produce il seguente file html.
<!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>
Questo funziona bene quando si visita la radice della app localhost:3000/, ma non riesce quando provo a visitare l'applicazione da un altro URL, ad esempio, localhost:3000/items/1 perché i file in bundle non sono iniettati con un percorso assoluto. Quando viene caricato il file html, cercherà il file js all'interno della directory inesistente /items perché react-router non è ancora stato caricato.
Come è possibile ottenere HtmlWebpackPlugin per iniettare i file con un percorso assoluto, quindi Express li cercherà nella directory principale della directory /dist e non in /dist/items/main-...min.js? O forse posso cambiare il mio server express per aggirare il problema?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
In sostanza, ho solo bisogno di ottenere la linea:
<script src="main...js"></script>
per avere una barra all'inizio della fonte.
<script src="/main...js></script>
Grazie, aggiungendo 'output.publicPath = '/'' era la soluzione. – aherriot
Questo non funzionerà se si sta eseguendo dietro proxy inverso. –
Si potrebbe anche usare semplicemente '