Ich verwende Webpack und das HtmlWebpackPlugin, um gebündelte JS und CSS in eine HTML-Vorlagendatei zu injizieren.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
Und es erzeugt die folgende HTML-Datei.
<!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>
Dies funktioniert gut, wenn Sie das Stammverzeichnis der App localhost:3000/
besuchen, schlägt jedoch fehl, wenn ich versuche, die App von einer anderen URL aus zu besuchen, z. B. localhost:3000/items/1
weil den gebündelten Dateien kein absoluter Pfad zugewiesen wird. Wenn die HTML-Datei geladen wird, sucht sie nach der JS-Datei im nicht vorhandenen /items
Verzeichnis, da der React -Router noch nicht geladen wurde.
Wie kann ich HtmlWebpackPlugin dazu bringen, die Dateien mit einem absoluten Pfad zu injizieren, sodass Express sie im Stammverzeichnis meines /dist
Verzeichnisses sucht und nicht unter /dist/items/main-...min.js
? Oder kann ich meinen Express-Server ändern, um das Problem zu umgehen?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
Im Wesentlichen muss ich nur die Zeile bekommen:
<script src="main...js"></script>
am Anfang der Quelle einen Schrägstrich haben.
<script src="/main...js></script>
quelle
output.publicPath = '/'
war die Lösung.<base href="https://stackoverflow.com/">
, um zu vermeiden, dass der Hostname in der HTML-Vorlage fest codiert oder Variablen interpoliert werden müssen.In der Tat musste ich sagen:
damit es in einem Nicht-ROOT-Pfad funktioniert. Zur gleichen Zeit spritzte ich:
in
Mit beiden Parametersätzen funktionierte es wie ein Zauber.
quelle
URL
On-Browser alshttps://localhost/myproject/%3C%=%20htmlWebpackPlugin.options.baseUrl%20%%3E#/project/1
. Gibt es eine Möglichkeit, dies zu lösen?baseUrl: '.'
es in den HtmlWebpackPlugin-Optionen ein?{ meta: { baseUrl: './' } }
?'./'
ist der richtige Wert.in der Webpack-Konfiguration
in Ihrer index.html
das sollte es tun.
quelle