Webpack dev-Server kann nicht `http: // localhost/8080/bundle.js`

Question

Vor diesem config:

var webpack = require('webpack'); 
const path = require('path') 

module.exports = { 
    entry: "./src/index.js", 
    output: { 
    path: path.join(__dirname, 'dist'), 
    publicPath: path.join(__dirname, 'dist'), 
    filename: "bundle.js" 
    }, 
    devServer: { 
    contentBase: "./dist", 
    // hot: true, 
    } 
} 

Warum wird nicht webpack-dev-Server-Server meiner app richtig? Ich habe 0% Verständnis von localhost, vs. localhost/webpack-dev-server, vs. publicPath, vs. contentBase, etc .. Ich kenne alle diese Pfade, und Konfigurationsschlüssel sind wichtig, um mein Projekt richtig einzurichten, aber trotz stundenlangem Lesen sie bleiben so verwirrend wie zu Beginn.

Wenn ich gehe zu localhost:8080/webpack-dev-server sehe ich Get http://localhost:8080/bundle.js net: ERR_ABORTED` in der Konsole.

Answer 1

Im Folgenden sind einfach und geradlinig Regeln für webpack & webpack-dev-Server:

1. output.path: Es braucht eine absolute path oder / sein. Sie können es leicht erhalten mit path.join
2. output.filename: Dies muss der Name der Ausgabedatei ohne zusätzliche Dateipfad sein.
3. devServer.contentBase: Es ist die physische Position auf der Platte, die als Stammverzeichnis von webpack-dev-Server bedient wird, wenn Sie http://localhost:8080

Vereinbarungs öffnen, halten wir beide output.path und devServer.contentBase gleichen . Der schwierige Teil ist, wenn Sie webpack cmd ausführen, generiert es die physische bundle.js Datei.

Aber wenn man webpack-dev-server laufen, NO physikalische Ausgang-Datei generiert wird, sondern hält es die generierte Ausgabe in Speichern arbeiten zu vermeiden Datei-Schreiben, was wiederum hilft bei der schnelleren Entwicklung/Debug-Zyklus.

Also jede Änderung, die Sie in src.js or main.js Datei machen, wird es die Ausgabe generieren, aber wird nicht auf die Festplatte schreiben und wepack-dev-Server liest das direkt aus dem Speicher.

4. output.publicPath: Dies wird verwendet, um webpack, webpack-dev-Server & andere Plug-in der Ausgabe zu erzeugen oder die erzeugte Bündel dienen. Der Standardwert ist /.

Es ist virtueller Pfad und muß auf der physischen Scheibe nicht vorhanden sein. Beispiel: Name der endgültigen Anwendung, wenn mehrere Apps auf demselben Server wie , /app2 oder einem externen CDN-Pfad /CDN-Path gehostet werden.

Es ist auch hilfreich für React-Router <BrowserRouter basename='/app1'>

nun die Bündelausgabedatei zu beziehen, die erzeugt wird & im Speicher gehalten werden, müssen Sie die output.publicPath heißt Virtual Path in der URL des Browsers anzuhängen. http://localhost:8080/<output.publicPath>/<output.filename>

In Ihrem Fall entweder Sie die publicPath: path.join(__dirname, 'dist') zu publicPath: '/dist' ändern, wenn es keine Leerzeichen enthält:

Die endgültige URL für webpack-dev-Server sein. Sie können es überprüfen, indem Sie den Wert path.join(__dirname, 'dist') drucken, der den absoluten Pfad zurückgibt [anders unter MacOS & Fenstersystem].

http://localhost:8080/dist/bundle.js

Wenn Sie weiter graben wollen tiefer, dann ist hier die URL

https://medium.com/p/webpack-understanding-the-publicpath-mystery-aeb96d9effb1