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?