wake-up-neo.com

webpack-dev-server hot reload funktioniert nicht

Meine Dateistruktur ist:

dist
  css
    style.css
  index.html
  js
    bundle.js
src
  css
    style.css
  index.html
  js
    main.js
node_modules
webpack.config.js
package.json

Mein webpack.config.js sieht folgendermaßen aus:

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: './dist/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
};

Ich renne:

webpack-dev-server --content-base dist --hot

Und es baut und scheint zu funktionieren. localhost: 8080 zeigt das erwartete Ergebnis, aber Hot-Reload funktioniert einfach nicht. Wenn ich eine Datei ändere, kann ich im Terminal sehen, dass eine Neuerstellung stattfindet, aber im Browser nichts passiert. Fehlt mir etwas in der config?

javascriptnode.jswebpackvue.js
12
riccardolardi

Bei Verwendung von webpack-dev-server werden alle Dateien intern erstellt, und nicht spuckt sie in den Ausgabepfad aus. Wenn Sie nur webpack ohne den dev-Server ausführen, wird die eigentliche Kompilierung auf die Festplatte ausgeführt. Der dev-Server macht alles im Speicher, was die Neukompilierung erheblich beschleunigt.

Um Ihr Hot-Reload-Problem zu beheben, setzen Sie die Inhaltsbasis auf Ihr Quellverzeichnis und aktivieren Sie inline-mode

So wie:

webpack-dev-server --content-base src --hot --inline
15
Mario Tacke

Was für mich funktioniert hat, ist, <script src="bundle.js"> und nicht <script src="dist/bundle.js"> in meine index.html-Datei zu schreiben.

// index.html
<script src="bundle.js"></script>      // works
<script src="dist/bundle.js"></script> // doesn't work!

Das Beibehalten von dist/bundle.js als Ausgabedatei funktioniert einwandfrei, wenn Sie es einfach mit webpack erstellen. Bei Verwendung von webpack-dev-server wird jedoch die statische Datei, die sich bereits im Dateisystem befindet, weiterhin bereitgestellt, und nicht der neueste Hot-Ersatz. Es scheint, dass webpack-dev-server verwirrt wird, wenn dist/bundle.js in der html-Datei angezeigt wird und diese nicht heiß ersetzt, obwohl webpack.config.js für diesen Pfad konfiguriert ist.

17
fafaro

--inline --hot war für mich kein Problem

Wenn Sie Redux verwenden, können Sie dies versuchen.

Aus irgendeinem zufälligen Grund erlaubte redux-devtools kein Hot-Reload für mich. Versuchen Sie es aus der Root-Komponente und redux compose config zu entfernen.

Hinweis: Verwenden Sie die redux devtool Browsererweiterung mit dieser Konfiguration in Ihrer Shop-Konfiguration: window.devToolsExtension ? window.devToolsExtension() : f => f

Muss auch lesen: https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

Oder versuchen Sie Hot Reload 3: Beispiel: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

1
Priyanshu Chauhan

Das heiße Nachladen von Webpacks funktionierte für mich ebenfalls nicht mehr. Die Lösung für mich war, den Ordner node_modules zu löschen und alle Abhängigkeiten neu zu installieren. Öffnen Sie einfach den übergeordneten Ordner von node_modules in Ihrem Terminal und führen Sie npm install aus.

1
Tom

100% Arbeitslösung

Sie müssen nur 3 Schritte befolgen und erhalten das heiße Nachladen wie erwartet

  1. Fügen Sie den Schlüssel "publicPath" in die Eigenschaft "Output" der Webpack-Konfiguration ein. "publicPath" sollte den Pfad zu Ihrer bundle.js-Datei enthalten, damit der dev-server erkennt, ob die bundle.js-Datei geändert wurde, und Ihre Anwendung neu lädt.

Deine Config sollte so aussehen - 

output: {
   path: __dirname,
   publicPath:"/dist/js/",
   filename: './dist/js/bundle.js'
}
  1. Option "devServer" in der Konfigurationsdatei hinzufügen -
devServer:{
   contentBase:"/src/",
   inline:true,
   stats:"errors-only"
}

Bitte beachten Sie, dass contentBase auf den Pfad zeigen sollte, in den Sie Ihre index.html-Datei einfügen, die Ihr Skript-Tag enthält. In Ihrem Fall wird dies "/ src /" sein.

  1. Als letztes müssen Sie sicherstellen, dass das 'src'-Attribut Ihres' script'-Tags in index.html auf bundle.js verweist, beginnend mit " http: // localhost: port " wie folgt - 

<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>

in Ihrem Fall wird es so aussehen - 

<script src="http://localhost:8080/js/dist/bundle.js" type="text/javascript"></script>

Und schließlich denken Sie daran, webpack-dev-server doesn't compile your js file or make build or watch on your js-Datei, es wird alles in den Speicher geschrieben, um sich Ihre js-Datei anzusehen, die Sie ausführen müssenwebpack --watchim seprate-Fenster

0
Jay Bidwai

Überprüfen Sie Ihre Konsolenprotokolle, wenn der Fehler unter dem folgenden Fehler liegt, und fügen Sie der Webpack Dev Server-Datei cors hinzu

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload

Fügen Sie im Idealfall den folgenden Eintrag in Ihrem dev-Server hinzu

headers: { "Access-Control-Allow-Origin": "*" },
0
Shadab Ahmed

Versuche dies:

Löschen Sie in Ihrer package.json-Datei die Zeile, die "test" "echo \"Error: no test specified\" && exit 1" unter dem Skriptobjekt enthält, und ersetzen Sie sie durch

...
"scripts": {
    "start": "webpack-dev-server --hot"
  },

...

Um Ihr Projekt neu zu starten, verwenden Sie einfach npm start. 

Das hat für mich funktioniert, als ich auf dieses Problem gestoßen bin. 

Bearbeiten: Können Sie Ihre package.json-Datei freigeben?

Versuchen Sie auch, dies zu webpack.config.js hinzuzufügen

devServer: {
  inline: true,
  port: 3000,
  hot: true
},
0
hammerabi

Keine der Optionen auf dieser Seite hat für mich funktioniert. Nachdem Sie den Abschnitt devServer geändert haben:

devServer: {
    port: 8080,
    contentBase: ['./src', './public'], // both src and output dirs
    inline: true,
    hot: true
},

es funktionierte.

0
Nelson Teixeira