Webpack-dev-server compile les fichiers, mais ne se rafraîchit pas ou ne rend disponible le javascript compilé pour le navigateur

J'essaie d'utiliser webpack-dev-server pour compiler des fichiers et démarrer un serveur web dev.

Dans mon package.json j'ai la propriété script définie pour:

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

Ainsi, le --hot et --inline devraient permettre au serveur web et au rechargement à chaud (si je le comprend).

Dans mon fichier webpack.config.js , j'ai configuré les paramètres d'entrée, de sortie et de devServer ainsi que d'ajouter un chargeur pour rechercher des modifications dans les fichiers .vue :

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

Donc, avec cette configuration, je lance npm run dev . Le serveur web-dev-server démarre, le test du chargeur de module fonctionne (c.-à-d. Lorsque j'enregistre un fichier .vue, il provoque la recompilation du pack web), mais:

  • Le navigateur ne se rafraîchit pas
  • Le javascript compilé qui est stocké dans la mémoire n'est jamais mis à la disposition du navigateur

Sur cette deuxième puce, je peux le voir parce que dans la fenêtre du navigateur, les espaces réservés de la vue ne sont jamais remplacés et si j'ouvre la console javascript, l'instance Vue n'est jamais créée ou mise à disposition dans le monde entier.

Gif du problème

Qu'est-ce qui me manque?

Deux choses ont causé mes problèmes ici:

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

Voici le webpack.config.js fixe:

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

J'ai eu le même problème et je trouve que, en plus de tous ces points, nous devons également mettre l'index.html avec le bundle.js de sortie dans le même dossier et définir le contenuBase dans ce dossier, soit la racine, soit un sous-dossier .

Après une longue recherche, j'ai trouvé la solution pour mon problème, dans mon cas, le chemin de sortie n'était pas configuré correctement.

Cette configuration a résolu mon problème:

 const path = require('path'); module.exports = { "entry": ['./app/index.js'], "output": { path: path.join(__dirname, 'build'), publicPath: "/build/", "filename": "bundle.js" }.... 

Cela peut arriver à cause de ExtractTextPlugin . Déactive le ExtractTextPlugin en mode développement. Utilisez-le uniquement pour la construction de production.