HtmlWebpackPlugin fügt relative Pfaddateien ein, die beim Laden von Nicht-Root-Websitepfaden unterbrochen werden

Bin ich mit dem webpack und der HtmlWebpackPlugin zu injizieren gebündelt js und css in eine html-template-Datei.

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 man in die root der app localhost:3000/ aber fehlschlägt, wenn ich versuche zu besuchen, die app von einer anderen URL, zum Beispiel localhost:3000/items/1 weil die Bundle-Dateien werden nicht injiziert, die mit einem absoluten Pfad. Wenn die html-Datei geladen wird, sieht es für die js-Datei in das nicht-existieren /items Verzeichnis, da reagieren-router noch nicht geladen noch.

Wie bekomme ich HtmlWebpackPlugin zu injizieren, die Dateien mit einem absoluten Pfad, also express Aussehen wird für Sie an der Wurzel meiner /dist Verzeichnis und nicht auf /dist/items/main-...min.js? Oder vielleicht kann ich meine express-server 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 Grunde brauche ich nur die Zeile:

<script src="main...js"></script>

haben Sie einen Schrägstrich am Anfang der Quelle.

<script src="/main...js></script>

InformationsquelleAutor der Frage aherriot | 2016-01-05

  1. 118

    Versuchen Sie, die publicPath in Ihrem webpack config:

    output.publicPath = '/'

    HtmlWebpackPlugin verwenden Sie die publicPath vorangestellt wird, die urls der spritzt.

    Weitere option ist, um die base-href im <head> von der html-Vorlage, Angabe der base-url für alle relativen urls im Dokument.

    <base href="http://localhost:3000/">

    InformationsquelleAutor der Antwort Magnus Sjungare

  2. 9

    In der Tat, ich hatte zu sagen :

    output.publicPath: './';

    haben, um es in einem non-ROOT-Pfad.
    Zur gleichen Zeit war ich die Injektion :

       baseUrl: './'

    in 

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

    Beide parameter gesetzt, es funktionierte wie ein Charme.

    InformationsquelleAutor der Antwort Kevin FONTAINE

  3. 0

    im webpack config 

    config.output.publicPath = ''

    in Ihrem index.html 

    <base href="/someurl/" />

    dies sollte es tun.

    InformationsquelleAutor der Antwort hannad rehman

Schreibe einen Kommentar