vuejs页面不会使用webpack-dev-server

时间:2016-08-25 06:35:51

标签: javascript webpack vue.js webpack-dev-server

我正在使用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');
});

我需要你的帮助,非常感谢!

0 个答案:

没有答案