web-dev-qa-db-de.com

HtmlWebpackPlugin injiziert relative Pfaddateien, die beim Laden von Pfaden, die keine Root-Website sind, unterbrochen werden

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 problemlos, wenn Sie das Stammverzeichnis der App localhost:3000/ besuchen. Dies schlägt jedoch fehl, wenn ich versuche, die App über eine andere URL aufzurufen, beispielsweise localhost:3000/items/1, da den gebündelten Dateien kein absoluter Pfad hinzugefügt wird. Wenn die html-Datei geladen ist, wird nach der js-Datei im nicht vorhandenen /items-Verzeichnis gesucht, da der reakt-router noch nicht geladen wurde.

Wie kann ich HtmlWebpackPlugin dazu bringen, die Dateien mit einem absoluten Pfad einzufügen, so dass 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>

einen Schrägstrich am Anfang der Quelle haben.

<script src="/main...js></script>
javascriptexpresswebpackreact-router
83
aherriot

Versuchen Sie, den publicPath in Ihrer Webpack-Konfiguration festzulegen:

output.publicPath = '/'

HtmlWebpackPlugin verwendet den publicPath, um die URLs der Injektionen voranzustellen.

Eine weitere Option ist das Festlegen der Basis-Href im <head> Ihrer HTML-Vorlage, um die Basis-URL aller relativen URLs in Ihrem Dokument anzugeben.

<base href="http://localhost:3000/">
143
Magnus Sjungare

In der Tat musste ich setzen:

output.publicPath: './';

um es in einem nicht-ROOT Pfad arbeiten zu lassen ..

   baseUrl: './'

in 

<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

Mit beiden Parametersätzen funktionierte es wie ein Zauber.

12
Kevin FONTAINE

in webpack config 

config.output.publicPath = ''

in deiner index.html 

<base href="/someurl/" />

das sollte es tun.

0
hannad rehman