web-dev-qa-db-de.com

Der Webpack-dev-Server kompiliert Dateien, aktualisiert aber nicht oder stellt das kompilierte Javascript dem Browser zur Verfügung

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

In meinem package.json habe ich die Skripteigenschaft gesetzt auf:

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

Der --hot und --inline sollte also den Webserver und das Hot-Reloading aktivieren (soweit ich das verstehe). 

In meiner webpack.config.js-Datei stelle ich die Einstellungen für Eingabe, Ausgabe und devServer ein und füge einen Loader hinzu, um nach Änderungen in .vue-Dateien 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'}
        ]
    }
};

Mit diesem Setup führe ich npm run dev aus. Der webpack-dev-server wird gestartet, der Test des Moduls zum Laden des Moduls funktioniert (d. H. Wenn ich eine .vue-Datei speichere, wird das webpack erneut kompiliert), aber:

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

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

 Gif of issue

Was vermisse ich?

56
Chris Schmitz

Zwei Dinge verursachten hier meine Probleme:

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 der feste 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'}
        ]
    }
};
55
Chris Schmitz

Nach langer Suche habe ich die Lösung für mein Problem gefunden, in meinem Fall Ausgabepfad war 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"
  }....
11

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

4
Bing

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

1

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

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

Wenn Sie Chrome wie mich verwenden, öffnen Sie einfach Developer Tools und klicken Sie auf Clear site data. Sie können auch feststellen, ob dies das Problem ist, wenn Sie die Site im Inkognito-Modus ausführen.

 enter image description here

1
Ogglas

Irgendwie funktioniert das Entfernen von "--hot" für meinen Fall. Also entfernte ich hot: 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]']
  },
0
Polv

In einer ähnlichen Situation hat webpack-dev-server meine index.html -Datei geliefert, aber nicht aktualisiert. Nachdem ich einige Beiträge gelesen hatte, stellte ich fest, dass webpack-dev-server keine neue js-Datei generiert, sondern eine in index.html einfügt.

Ich habe den html-webpack-plugin zu meiner App hinzugefügt und mit der folgenden Konfiguration in meiner webpack.config.js -Datei:

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 in index.html verweist. Ich kann jetzt webpack-dev-server ohne zusätzliche Flags ausführen und alle Änderungen an meinen Dateien werden sofort im Browser angezeigt.

0
nflauria

Ich werde meine eigene Geschichte von Webpack --watch an die Wand des Leidens hier anhängen.

Ich lief

webpack --watch

um ein TypeScript-Projekt zu erstellen. Die kompilierten .js -Dateien würden aktualisiert, das Bundle, das der Browser sah, jedoch nicht. Ich befand mich also im Grunde in derselben Position wie das OP.

Mein Problem ist auf den Parameter watchOptions.ignored zurückzuführen. Der ursprüngliche Autor der Build-Konfiguration hat ignored als Filterfunktion eingerichtet, was sich als ungültiger Wert für diesen Parameter herausstellt. Das Ersetzen der Filterfunktion durch ein geeignetes RegExp hat den Build --watch wieder für mich funktionsfähig gemacht.

0
tel

die richtige Lösung

Teilen Sie dev-server watch den Dateien mit, die von der Option devServer.watchContentBase bereitgestellt werden.

Es ist standardmäßig deaktiviert.

Wenn diese Option aktiviert ist, lösen Dateiänderungen ein vollständiges Neuladen der Seite aus.

Beispiel:

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};
0
Shakiba Moshiri

Ihr Projektbaum ist nicht klar, das Problem kann jedoch in der Einstellung contentBase liegen. Versuchen Sie, contentBase: __dirname festzulegen

Mein Fall war, dass ich mich so intensiv mit dem Experimentieren mit Webpack-Funktionen befasst habe, aber total vergessen hatte, dass ich die ganze Zeit so eingestellt hatte, dass sie als falsch eingestuft wurde ...

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

Das Einschalten war mein Ticket.

0
klewis