Ich versuche, webpack-dev-server zu verwenden, um Dateien zu kompilieren und einen dev-Webserver zu starten.
In meinem habe package.json
ich die Skripteigenschaft festgelegt auf:
"scripts": {
"dev": "webpack-dev-server --hot --inline",
}
Das --hot
und --inline
sollte also den Webserver und das Hot-Reloading ermöglichen (so wie ich es verstehe).
In meiner webpack.config.js
Datei lege ich die Einstellungen für Eintrag, Ausgabe und devServer fest 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'}
]
}
};
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?
quelle
Antworten:
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'} ] } };
quelle
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" }....
quelle
die richtige Lösung
Weisen Sie
dev-server
an , die von der Option devServer.watchContentBase bereitgestellten Dateien anzusehen .Wenn diese Option aktiviert ist, lösen Dateiänderungen ein erneutes Laden der gesamten Seite aus .
Beispiel:
module.exports = { //... devServer: { // ... watchContentBase: true } };
quelle
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 .
quelle
In meinem Fall funktioniert das Entfernen von "--hot" irgendwie. Also habe ich entfernt
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]'] },
quelle
Dies kann aufgrund von ExtractTextPlugin passieren . Deaktivieren Sie das ExtractTextPlugin im Entwicklungsmodus. Verwenden Sie es nur für den Produktionsaufbau.
quelle
Dies ist mir auch passiert, nachdem zwei verschiedene Anwendungen
webpack-dev-server
nacheinander 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 Tools
Sie 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.quelle
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.
quelle
Ich hatte eine ähnliche Situation, in
webpack-dev-server
der meineindex.html
Datei bereitgestellt, aber nicht aktualisiert wurde. Nachdem ich einige Beiträge gelesen hatte, stellte ich fest, dasswebpack-dev-server
keine neue js-Datei generiert, sondern eine eingefügt wirdindex.html
.Ich habe das
html-webpack-plugin
zu meiner App hinzugefügt und mit der folgenden Konfiguration in meinerwebpack.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 verweist
index.html
. Ich kann jetztwebpack-dev-server
ohne zusätzliche Flags ausgeführt werden und alle Änderungen an meinen Dateien werden sofort im Browser angezeigt.quelle
Ich werde
--watch
der Wand des Leidens hier meine eigene besondere Geschichte von Webpack Leid hinzufügen .ich lief
um ein Typescript-Projekt zu erstellen. Die kompilierten
.js
Dateien 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.ignored
Parameter. Der ursprüngliche Autor der Build-Konfiguration hatteignored
eine Filterfunktion eingerichtet, die sich als ungültiger Wert für diesen Parameter herausstellt. Durch Ersetzen der Filterfunktion durch eine entsprechende Funktion funktionierteRegExp
der--watch
Build für mich wieder.quelle
Ihr Projektbaum ist nicht klar, das Problem liegt jedoch möglicherweise in der ContentBase-Einstellung. Versuchen Sie, contentBase: __dirname festzulegen
quelle