我正在使用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');
});
我需要你的帮助,非常感谢!