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

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.

Was vermisse ich?

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'}
        ]
    }
};

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"
  }....

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
  }
};

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 .

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]']
  },

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

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.

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.

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.

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.

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