Używam pakietu webpack i HtmlWebpackPlugin do wstrzyknięcia pakietów js i css do pliku szablonu html.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
I tworzy następujący plik 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>
Działa to dobrze podczas odwiedzania katalogu głównego aplikacji localhost:3000/, ale kończy się niepowodzeniem, gdy próbuję odwiedzić aplikację z innego adresu URL, na przykład localhost:3000/items/1ponieważ dołączone pliki nie są wstrzykiwane z bezwzględną ścieżką. Po załadowaniu pliku html będzie szukał pliku js w nieistniejącym /itemskatalogu, ponieważ reakcja-router nie została jeszcze załadowana.
Jak mogę zmusić HtmlWebpackPlugin do wstrzyknięcia plików z bezwzględną ścieżką, aby express będzie szukał ich w katalogu głównym mojego /distkatalogu, a nie w /dist/items/main-...min.js? A może mogę zmienić serwer ekspresowy, aby obejść ten problem?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
Zasadniczo potrzebuję tylko linii:
<script src="main...js"></script>mieć ukośnik na początku źródła.
<script src="/main...js></script>
output.publicPath = '/'było rozwiązaniem.