vuejs頁面不會自動刷新使用webpack-dev-server

Question

我使用vue.js，我想用webpack-dev-server在修改vue.js文件時自動刷新頁面，但我必須自己刷新頁面。

VUE：

import Vue from 'vue'; 
var myComponent = Vue.extend({ 
    template:"<div>hello vue template</div>" 
}); 
Vue.component('my-component',myComponent); 
var vm = new Vue({ 
    el: '#app' 
}); 

HTML：

<div id="app"> 
    <my-component></my-component> 
</div> 

webpack.config.js：

const webpack = require('webpack'); 
module.exports = { 
    entry:['webpack-dev-server/client?http://localhost:8080', 
'webpack/hot/only-dev-server','./src/vue/main.js'], 
    output:{ 
     path: __dirname + '/dist/js', 
     filename:'vue.bundle.js', 
     publicPath:'/public' 
    }, 
    module:{ 
     loaders:[ 
      { 
       test:/\.jsx?$/, 
       exclude:/node_modules/, 
       loaders:["babel"] 
      }, 
      { 
       test: /\.vue$/, 
       loader: 'vue' 
      }, 
      { 
       test:/\.css$/, 
       loader:'style!css' 
      }, 
      { 
       test: /\.scss$/, 
       loader: 'style!css!sass' 
      }, 
      { 
       test:/\.(jpg|png)$/, 
       loader:'url' 
      } 
     ] 
    }, 
    resolve: { 
     root: [process.cwd() + '/src', process.cwd() + '/node_modules'], 
     alias: {}, 
    extensions: ['', '.js', '.vue','.css', '.scss', '.ejs', '.png','.jpg'] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.BannerPlugin('This file is created by laoqiren') 
    ] 
}; 

server.js：

var webpack = require('webpack'); 
var WebpackDevServer = require('webpack-dev-server'); 
var config = require('./webpack.config'); 

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    inline: true, 
    stats:{colors:true}, 
    historyApiFallback: true 
}).listen(8080, 'localhost', function (err, result) { 
    if (err) console.log(err); 
    console.log('Listening at localhost:8080'); 
}); 

我需要你的幫助，非常感謝！

Answer 1

您需要在您的webpack.config中配置hot module