Le rechargement à chaud sur vue-loader ne fonctionne qu'avec les modifications structurelles du modèle

Question

J'ai configuré vue + vue-loader + HMR sur un projet existant.

Cela fonctionne principalement bien, les composants de vue sont chargés et rendus correctement.

La partie de rechargement du module chaud est configurée et chargée. Toutefois, il ne semble pas appliquer de mises à jour lorsque la modification est uniquement un nœud de texte du composant.

Par exemple, si j'ai un élément comme celui-ci:

<template lang="html"> 
    <div> 
    <h1>I'm a Component</h1> 
    </div> 
</template> 

<script> 
export default { 
} 
</script> 

Et je change à ceci:

<template lang="html"> 
    <div> 
    <h1>I'm a Component updated</h1> 
    </div> 
</template> 

<script> 
export default { 
} 
</script> 

Ensuite, je peux voir les mises à jour de HMR dans la console du navigateur.

Mais le composant ne met pas à jour, il dit encore: « Je suis un composant ».

Cependant, si je modifie légèrement la structure HTML du composant comme ceci:

<template lang="html"> 
    <div> 
    <h1>I'm a Component updated</h1> 
    <p>do it</p> 
    </div> 
</template> 

<script> 
export default { 
} 
</script> 

Ensuite, la console affiche le journal de HMR mais cette fois la mise à jour des composants.

Le comportement est toujours le même, changement de texte = pas de mise à jour.

Le chargeur n'a rien de particulier dans sa configuration.

{ 
test: /\.vue$/, 
loader: 'vue-loader', 
options: { 
    loaders: { 
    } 

} 

Le serveur dev est lancement via gulp cette tâche:

// Start a webpack-dev-server 
const hot_webpack_config = cloneDeep(webpack_config) 

hot_webpack_config.output.filename = 'frontend.hot.js' 
hot_webpack_config.output.publicPath = PUBLIC_DEV_SERVER 
hot_webpack_config.entry.unshift("webpack-dev-server/client?"+PUBLIC_DEV_SERVER, "webpack/hot/dev-server"); 
hot_webpack_config.plugins.push(new webpack.HotModuleReplacementPlugin()) 

var compiler = webpack(hot_webpack_config) 

var WebpackDevServer = require("webpack-dev-server") 

new WebpackDevServer(compiler, { 
    //noInfo: true, 
    hot: true, 
    stats: { 
     assets: false, 
     colors: true, 
     version: false, 
     timings: false, 
     chunks: false, 
     chunkModules: false 
    }, 
    inline: true, 
    publicPath: hot_webpack_config.output.publicPath, 
    headers: { "Access-Control-Allow-Origin": "*" } 

}).listen(4000, "localhost", function(err) { 
    if(err) throw new gutil.PluginError("webpack-dev-server", err) 
    // Server listening 
    gutil.log(chalk.blue("Hot server listening at http://0.0.0.0:4000")) 

}) 

Je ne sais pas d'autre endroit où regarder pour résoudre ce problème. Comme mentionné, cela fonctionne un peu, mais pas pour les mises à jour de nœuds de texte. J'ai regardé le modèle généré par l'exemple vue-cliwebpack-simple et le code est quelque peu similaire (sauf que le serveur dev est lancé à partir de la ligne de commande du nœud plutôt que de le construire manuellement), le leur met à jour le nœud de texte, le mien ne :(

Tous les indices

Mise à jour: versions des dépendances pertinentes

vue 2.3.4 
vue-loader 13.0.0 
vue-template-compiler 2.3.4 
webpack 2.6.1 
webpack-dev-server 2.5.0 

Mise à jour 2: L'application de toute modification à la partie <script> du composant provoque l'actualisation des nœuds de texte.

Mise à jour 3:

// webpack_config.js 
/* jshint node: true */ 
var webpack = require('webpack'), 
    path = require('path'), 
    package = require('./package.json'), 
    gutil = require('gulp-util'), 
    chalk = require('chalk'); 

const PUBLIC_DEV_SERVER = package.config.build.PUBLIC_DEV_SERVER 
const ENTRY = package.config.build.ENTRY 

var PROD = process.env.NODE_ENV == 'production'; 

let config = { 
    entry: [ 
     ENTRY 
    ], 
    output: { 
     path: path.join(__dirname, 'resources', 'js'), 
     filename: 'frontend.min.js' 
    }, 
    module: { 

     rules: [{ 
       test: /\.vue$/, 
       loader: 'vue-loader', 
       options: { 
        loaders: { 
        } 

       } 
      }, { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015', 'stage-0'], 
       } 
      } 
     ] 
    }, 
    resolve: { 
     alias: { 
      'vue$': 'vue/dist/vue.esm.js' 
     } 
    } 

}; 

if (process.env.NODE_ENV === 'production') { 
    gutil.log(chalk.red("Build for production")); 
    config.devtool = '#source-map' 
    config.entry = [ 
     ENTRY 
    ]; 
    // http://vue-loader.vuejs.org/en/workflow/production.html 
    config.plugins = (config.plugins || []).concat([ 
     new webpack.DefinePlugin({ 
      'process.env': { 
      NODE_ENV: '"production"' 
      } 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      sourceMap: true, 
      compress: { 
      warnings: false 
      } 
     }), 
     new webpack.LoaderOptionsPlugin({ 
      minimize: true 
     }) 
     ]) 
} else { 
    gutil.log(chalk.red("Build for development")); 
    config.devtool = '#eval-source-map' //"cheap-module-eval-source-map" 
    config.plugins = [ 
    ] 
} 

module.exports = config 

PUBLIC_DEV_SERVER est réglé sur "http://localhost:4000/"

ENTRY est réglé sur "./src/js/frontend.js"

Answer 1

J'ai essayé plusieurs choses à résoudre ce problème, je pensais que certains paramètres fixèrent mais revenant aux versions précédentes a soudainement commencé à travailler aussi.

A la fin, je pense que la solution était tout simplement:

rm -rf node_modules/ 
npm i 

Mais je ne sais pas exactement quelle partie de celui-ci fait tomber en morceaux.