Webpack Hot Module Reload Geben Sie einen anderen Pfad zum Bundle an

Question

Ich schreibe gerade eine einzelne Seite App und verwende Webpack.

Ich möchte jetzt das Hot Module Replacement Plugin verwenden, weil es praktisch aussieht.

Ich bin jedoch zu einem Problem gekommen. Es scheint, dass Sie nicht angeben können, wo die Datei bundle.js sein soll.

In meiner Datei index.html, lade ich die bundle.js Skript mit dem folgenden

<script type="text/javascript" src="/static/assets/script/app.bundle.js"></script> 

up Sobald der Build abgeschlossen ist, dann kann ich die Anwendung auf dem Server und alles ist in Ordnung einzusetzen.

Wenn ich jedoch das Modul Hot Module Replacement verwende, befindet sich die Datei app.bundle.js im Stammverzeichnis der Anwendung. So sind die folgenden Werke

<script type="text/javascript" src="/app.bundle.js"></script> 

Für meine Produktionskonfiguration, ohne HMR, ich habe folgendes:

// production 

entry: [ 
    './src/project/scripts/entry.js' 
], 

output: { 
    path: path.join(__dirname, '/public/static/assets/script'), 
    filename: 'app.bundle.js', 
}, 

Und für Entwickler mit HMR, ich habe folgendes

entry: [ 
    './src/project/scripts/entry.js', 
    'webpack/hot/dev-server', 
    'webpack-dev-server/client?http://localhost:8080/' 
], 

output: { 
    path: path.join(__dirname, '/public/static/assets/script'), 
    filename: 'app.bundle.js' 
}, 

Natürlich Wenn ich dev starte, kann app.bundle.js nicht gefunden werden, da die Pfade in der index.html auf /static/assets/script/app.bundle.js zeigen.

Gibt es eine Möglichkeit anzugeben, wo die app.bundle.js für das HMR-Plugin sein wird?

Answer 1

Stellt sich heraus, gibt es einen Weg. Fügen Sie den Pfad zu der Datei bundle.js im Dateinamen hinzu:

output: { 
    path: __dirname + '/public', 
    filename: 'static/assets/script/app.bundle.js' 
}