Webpack-dev-server kompiliert Dateien, aktualisiert oder kompiliert Javascript jedoch nicht für den Browser

79

Ich versuche, webpack-dev-server zu verwenden, um Dateien zu kompilieren und einen dev-Webserver zu starten.

In meinem habe package.jsonich die Skripteigenschaft festgelegt auf:

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

Das --hotund --inlinesollte also den Webserver und das Hot-Reloading ermöglichen (so wie ich es verstehe).

In meiner webpack.config.jsDatei lege ich die Einstellungen für Eintrag, Ausgabe und devServer fest und füge einen Loader hinzu, um nach Änderungen in .vueDateien zu suchen :

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

Also renne ich mit diesem Setup npm run dev. Der Webpack-Dev-Server wird gestartet, der Modul-Loader-Test funktioniert (dh wenn ich eine .vue-Datei speichere, wird das Webpack neu kompiliert), aber:

  • Der Browser wird nie aktualisiert
  • Das kompilierte Javascript, das im Speicher gespeichert wird, wird dem Browser niemals zur Verfügung gestellt

In diesem zweiten Punkt kann ich dies sehen, da im Browserfenster die Vue-Platzhalter niemals ersetzt werden und wenn ich die Javascript-Konsole öffne, wird die Vue-Instanz niemals global erstellt oder verfügbar gemacht.

Gif der Ausgabe

Was vermisse ich?

Chris Schmitz
quelle
Ich denke, Sie haben dafür gesorgt, dass Ihr Webpack nicht richtig funktioniert. Bundle.js fehlt in Ihrer Browserkonsole. Danach sollten Sie sich die Hot-Module-Ersatzdokumente webpack.github.io/docs/… genau ansehen und vorschlagen, zuerst mit dem CLI-Modus zu beginnen
mygoare
6
Ich habe die Dokumentation gelesen, als ich sie ausbaute, und persönlich finde ich die Erklärung etwas verworren. Auch wenn ich durch das Beispiel gegangen bin, das sie in einem neuen Projekt geben, funktioniert es nicht. Trotzdem habe ich einige Komponentenisolationstests durchgeführt und herausgefunden, was mit der Konfiguration zu tun hat. Ich werde heute beim Mittagessen eine detaillierte Antwort schreiben.
Chris Schmitz

Antworten:

64

Zwei Dinge haben hier meine Probleme verursacht:

module.exports = {
    entry: './src/index.js',
    output: {

        // For some reason, the `__dirname` was not evaluating and `/public` was
        // trying to write files to a `public` folder at the root of my HD.
        path: __dirname + '/public', 

        // Public path refers to the location from the _browser's_ perspective, so 
        // `/public' would be referring to `mydomain.com/public/` instead of just
        // `mydomain.com`.
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{

        // `contentBase` specifies what folder to server relative to the 
        // current directory. This technically isn't false since it's an absolute
        // path, but the use of `__dirname` isn't necessary. 
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

Hier ist das behoben webpack.config.js:

var path = require('path');

module.exports = {
    entry: [
        './src/PlaceMapper/index.js'
    ],
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/')
    },
    devtool: 'source-map',
    devServer:{
        contentBase: 'public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};
Chris Schmitz
quelle
8
Die Option "publicPath" ist der verwirrendste Teil für Entwickler-Server. Faustregeln: Wenn Sie "publicPath" nicht im Block "output" (Webpack-Konfiguration) festgelegt haben, setzen Sie die Option "publicPath" nicht für Ihren Entwicklungsserver ein
Alan
Vielen Dank, dass Sie die Option "publicPath" erwähnt haben. Das hat mir wirklich geholfen!
Benny Neugebauer
3
Die Webpack-Jungs sollten Ihre auf ihrer Gehaltsliste haben! Dies ist bei weitem die beste Dokumentation zum Einrichten des Servers, die ich auch ein Jahr später gesehen habe.
Ernie S
1
Wenn dies bei Ihnen nicht funktioniert, lesen Sie auch: github.com/webpack/webpack-dev-server/issues/… und github.com/webpack/webpack-dev-server/issues/… .
Yngvar Kristiansen
medium.com/code-oil/… das hat mir geholfen zu verstehen, warum es nicht funktioniert hat. In meinem Fall hatte ich publicPath auf '/' gesetzt, wenn es '/ js-lib /' sein sollte, und das ist der Grund, warum es nie Dateiänderungen auswählte, weil ich statische Dateien in js-lib anstelle des In-Memory bereitstellte Datei in 'http: localhost: 9001' + '/' (Ihr Webpack-Dev-Server-Host + publicPath)
Herz3h
19

Nach langer Suche fand ich die Lösung für mein Problem, in meinem Fall war der Ausgabepfad nicht richtig konfiguriert.

Diese Konfiguration hat mein Problem gelöst:

const path = require('path');

module.exports = {
  "entry": ['./app/index.js'],
  "output": {
    path: path.join(__dirname, 'build'),
    publicPath: "/build/",
    "filename": "bundle.js"
  }....
Serdar Değirmenci
quelle
8
Das Hinzufügen der publicPath-Eigenschaft hat es für mich
behoben
13

die richtige Lösung

Weisen Sie dev-serveran , die von der Option devServer.watchContentBase bereitgestellten Dateien anzusehen .

Es ist standardmäßig deaktiviert.

Wenn diese Option aktiviert ist, lösen Dateiänderungen ein erneutes Laden der gesamten Seite aus .

Beispiel:

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};
Shakiba Moshiri
quelle
2
Ich habe es stundenlang versucht, dein Vorschlag funktioniert endlich. Liebe Entwickler, eigentlich hat HMR für mein Projekt gearbeitet. Aber ich habe Webpack-Dev-Server mit Firebase-Serve über Proxy verbunden. Wenn ich diesen Vorschlag anwende, wurde mein Problem behoben. So danke.
Arda Zaman
4

Ich hatte das gleiche Problem und finde, dass wir zusätzlich zu all diesen Punkten auch die index.html zusammen mit der Ausgabe bundle.js im selben Ordner ablegen und die contentBase auf diesen Ordner setzen müssen, entweder den Stammordner oder einen Unterordner .

Bing
quelle
4

In meinem Fall funktioniert das Entfernen von "--hot" irgendwie. Also habe ich entfernthot: true

webpack.dev.js

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    publicPath: '/js/',
    contentBase: path.resolve(__dirname, 'docs'),
    watchContentBase: true,
  }
});

webpack.common.js

  output: {
    path: path.resolve(__dirname, 'docs/js'),
    filename: '[name].min.js',
    library: ['[name]']
  },
Polv
quelle
3

Dies kann aufgrund von ExtractTextPlugin passieren . Deaktivieren Sie das ExtractTextPlugin im Entwicklungsmodus. Verwenden Sie es nur für den Produktionsaufbau.

Serdar Değirmenci
quelle
Das war mein Problem. Anscheinend wird in der ExtraTextPlugin-Dokumentation angegeben, dass es kein Hot-Reload unterstützt. Vielleicht möchten Sie dies jedoch versuchen: stackoverflow.com/a/49932664/1319182
user1319182
1

Dies ist mir auch passiert, nachdem zwei verschiedene Anwendungen webpack-dev-servernacheinander auf demselben Port ausgeführt wurden. Dies geschah, obwohl das andere Projekt geschlossen wurde. Als ich zu einem nicht verwendeten Port wechselte, funktionierte er direkt.

devServer: {
    proxy: {
        '*': {
            target: 'http://localhost:1234'
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
    historyApiFallback: true,
},

Wenn Sie Chrome wie ich verwenden, öffnen Developer ToolsSie es einfach und klicken Sie aufClear site data . Sie können auch feststellen, ob dies das Problem ist, indem Sie die Site im Inkognito-Modus ausführen.

Geben Sie hier die Bildbeschreibung ein

Ogglas
quelle
Das ist mir auch passiert, außer dass ich auch Chrome neu starten musste.
Andrea Rosales
Chrome Neustart half auch
Vlad Isajkin
0

Mein Fall war, dass ich so tief in das Experimentieren mit Webpack-Funktionen vertieft war, aber völlig vergessen hatte, dass ich die Injektion die ganze Zeit so eingestellt hatte, dass sie falsch war ...

 new HTMLWebpackPlugin({
        inject: false,
        ...
 }),

Das einzuschalten war mein Ticket.

klewis
quelle
0

Ich hatte eine ähnliche Situation, in webpack-dev-serverder meine index.htmlDatei bereitgestellt, aber nicht aktualisiert wurde. Nachdem ich einige Beiträge gelesen hatte, stellte ich fest, dass webpack-dev-serverkeine neue js-Datei generiert, sondern eine eingefügt wird index.html.

Ich habe das html-webpack-pluginzu meiner App hinzugefügt und mit der folgenden Konfiguration in meiner webpack.config.jsDatei:

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]

Ich habe dann das Skript-Tag auskommentiert, das auf meine js-Eintragsdatei verweist index.html. Ich kann jetzt webpack-dev-serverohne zusätzliche Flags ausgeführt werden und alle Änderungen an meinen Dateien werden sofort im Browser angezeigt.

nflauria
quelle
0

Ich werde --watchder Wand des Leidens hier meine eigene besondere Geschichte von Webpack Leid hinzufügen .

ich lief

webpack --watch

um ein Typescript-Projekt zu erstellen. Die kompilierten .jsDateien würden aktualisiert, das vom Browser angezeigte Bundle jedoch nicht. Ich war also im Grunde in der gleichen Position wie das OP.

Mein Problem kam auf den watchOptions.ignoredParameter. Der ursprüngliche Autor der Build-Konfiguration hatte ignoredeine Filterfunktion eingerichtet, die sich als ungültiger Wert für diesen Parameter herausstellt. Durch Ersetzen der Filterfunktion durch eine entsprechende Funktion funktionierte RegExpder --watchBuild für mich wieder.

tel
quelle
0

Ihr Projektbaum ist nicht klar, das Problem liegt jedoch möglicherweise in der ContentBase-Einstellung. Versuchen Sie, contentBase: __dirname festzulegen

Ойбек Абдуллаев
quelle