वू-लोडर पर हॉट रीलोड केवल टेम्पलेट में संरचनात्मक परिवर्तनों के साथ काम करता है

Question

मैंने मौजूदा प्रोजेक्ट पर vue + vue-loader + HMR सेटअप किया है।

यह अधिकतर काम करता है, व्यू घटकों को लोड किया जाता है और सही ढंग से प्रस्तुत किया जाता है।

गर्म मॉड्यूल रीलोड भाग कॉन्फ़िगर और लोड हो रहा है।

हालांकि, यह परिवर्तन तब लागू होता प्रतीत होता है जब परिवर्तन केवल घटक का टेक्स्ट नोड होता है।

उदाहरण के लिए, मैं इस तरह एक घटक है, तो:

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

<script> 
export default { 
} 
</script> 

और मैं इस के लिए इसे बदल:

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

<script> 
export default { 
} 
</script> 

तब मैं ब्राउज़र कंसोल में HMR अपडेट देख सकते हैं।

लेकिन घटक को अपडेट नहीं करता, यह अभी भी कहते हैं, "मैं एक घटक हूँ"।

हालांकि, अगर मैं थोड़ा इस तरह घटक के HTML ढांचे में परिवर्तन:

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

<script> 
export default { 
} 
</script> 

फिर सांत्वना HMR लॉग दिखाता है लेकिन इस बार घटक अद्यतन।

व्यवहार लगातार वही है, टेक्स्ट परिवर्तन = कोई अपडेट नहीं है।

लोडर के पास इसकी कॉन्फ़िगरेशन में कुछ खास नहीं है।

// 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")) 

}) 

सुनिश्चित नहीं हैं और कहाँ इसे ठीक करने के देखने के लिए:

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

} 

डेव सर्वर को इस कार्य के साथ ही सांस के माध्यम से लांच है। जैसा कि बताया गया है, यह थोड़े काम करता है, सिर्फ पाठ नोड अपडेट के लिए नहीं।

मैंने vue-cliwebpack-simple नमूना द्वारा उत्पन्न टेम्पलेट को देखा है और कोड कुछ हद तक समान है (देव सर्वर को मैन्युअल रूप से इसे बनाने के बजाए नोड कमांड लाइन से लॉन्च किया गया है), उनके टेक्स्ट नोड अपडेट करते हैं, मेरा नहीं है :(

कोई सुराग

अद्यतन:? प्रासंगिक निर्भरता संस्करणों

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 

अद्यतन 2: घटक के <script> भाग में कोई भी संशोधन लागू करने से टेक्स्ट नोड रीफ्रेश हो जाता है।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"http://localhost:4000/"

ENTRY पर सेट है "./src/js/frontend.js"

Answer 1

पर सेट है मैं इसे ठीक करने के लिए कई चीजों की कोशिश की है, मैंने सोचा कि कुछ सेटिंग्स यह तय लेकिन पिछले संस्करणों में वापस लौटने से अचानक काम करना शुरू हो गया।

अंत में, मुझे लगता है कि ठीक बस गया था:

rm -rf node_modules/ 
npm i 

लेकिन मैं वास्तव में नहीं जानता कि जो इसका हिस्सा यह अलग गिर कर दिया।