webpack+babel，浏览器报Uncaught SyntaxError: Unexpected token import？

Question

我是照着 webpack教程 敲的代码，webpack打包成功了，就是在浏览器运行的时候报：Uncaught SyntaxError: Unexpected token import
请教各位大神，麻烦帮我看看代码，到底怎么解决这个问题。

// package.json

{
  "name": "webpack-vue2",
  "version": "1.0.0",
  "description": "webpack-vue2",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --color --progress"
  },
  "keywords": [],
  "author": "afei",
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-root-import": "^5.1.0",
    "webpack": "^1.14.0"
  },
  "dependencies": {
    "css-loader": "^0.26.2",
    "vue": "^2.2.1",
    "vue-loader": "^11.1.3",
    "vue-router": "^2.3.0",
    "vue-template-compiler": "^2.2.1",
    "vuex": "^2.2.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "style-loader": "^0.18.2"
  }
}

// webpack.config.js

var path = require('path'),
webpack = require('webpack');

module.exports = {
    entry:'./src/main',
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'build.js',
        publickPath:'./dist/'
    },
    module:{
        loader:[
            {test:/\.vue$/,loader:'vue-loader'},
            {test:/\.css/,loader:'style-loader!css-loader'},
            {test:/\.js$/,loader:'babel-loader',exclude:/node_modules/}
        ]
    }
};

// .babelrc

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

//main.js

import Vue from 'vue'
import  App from './App.vue'

new Vue({
    el:'#app',
    render:h=>h(App)
});

// App.vue

<template>
    <div>
        <h1>{{ mgs }}</h1>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                msg:"Hello afei"
            }
        }
    }
</script>