webpakc+exprss+vue.js的全栈热重启，遇到问题，望有大神能帮忙下！

Question

由于很想在vue.js的vue-hot-reload-api占80端口和nodejs+express占3000端口的开发环境下，进行前后端交互，但是由于遇到了跨域的问题，我只能用jsonp调试，但是很反感这种方式，于是乎我借鉴了，这个大神的https://segmentfault.com/a/1190000004505747?_ea=656247 就是node+express+webpack的全栈自动刷新，但是自己想调试vue-loader+wepack+express失败啦，代码如下，希望各位大神能帮助小弟下！

webpack.config.js代码

var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack = require('webpack')
var path = require('path')

var publicPath = 'http://localhost:3000/'

var devConfig= {
    entry: './src/main.js',
    output: {
        path: './views',
        publicPath: publicPath,
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,

            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url?limit=8192',
            },
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
            }
        ]
    },
    vue: {
        //带sass的loader，输出地点是app.css
        loaders: {
            css: ExtractTextPlugin.extract('css'),
            sass: ExtractTextPlugin.extract('css!sass')
        }
    },
    plugins: [
        new ExtractTextPlugin('./app.css'),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
    ],
    devtool: 'source-map'
}

module.exports = devConfig

接下来是app.js

 
var express = require('express')
var app = express()
app.set('views', 'views')
app.set('view engine', 'html')
app.use(express.static('public'))
app.engine('.html', require('ejs').__express)
require('./config.js')()

if (process.env.NODE_ENV === 'production') {
    var webpack = require('webpack'),
        webpackDevServer = require('webpack-dev-server'),
        webpackDevMiddleware = require('webpack-dev-middleware')
        webpackHotMiddleware = require('webpack-hot-middleware')
        webpackDevConfig = require('./webpack.config.js')
    var compiler = webpack(webpackDevConfig)
    
    app.use(webpackDevMiddleware(compiler, {
        publicPath: webpackDevConfig.output.publicPath,
        noInfo: true,
        stats:{
            colors: true
        }
    }))
    
    require('./routes/index')(app)
    var bs = require('browser-sync').create()
    app.listen(3000, function(){
        bs.init({
            open: false,
            ui:false,
            notify: false,
            proxy: 'localhost:3000',
            files: ['./views/**'],
            port:8080
        })
        console.log('App (production) is going running on port 8080 by')
    })
   
}


else {
    app.listen(3000, function() {
        bs.init({
            open: false,
            ui: false,
            notify: false,
            proxy: 'localhost:3000',
            port: 8080
        })
        console.log('App is going to be running on port 8080')
    })
}

出现如下问题，跑起来的话，就是原先的vue.js的加载器没办法使用，和babel加载器也没办法使用。不知道为什么，估计连vue-hot-reload-api也没办法使用，只能使用比较传统的css,js的加载器。文件的格式都是.vue结尾的！报错如下。

ERROR in ./src/main.js
Module parse failed: d:\nodejs\blogBackEnd\node_modules\babel-loader\index.js!d:\nodejs\blogBackEnd\src\main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import 'babel-polyfill';
| import Vue from 'vue';
| import VueRouter from 'vue-router';

希望有大神能提出比较好的解决方式!在此感谢先感谢每一个回答的朋友！！如果还需要贴代码我会发的。

Answer 1

Babel 没配置，http://babeljs.io/docs/usage/babelrc/

Answer 2

{
  "plugins": ["transform-runtime"],
  presets: ["es2015"]
}

放一个.babelrc文件在根目录下