webpack打包vue模版文件中的JS代码没经过babel编译。

Question

在webpack+vue中遇到个问题。参考了其他一些成熟的demo也没有发现问题所在。请求帮助！
我在.vue后缀的模版文件中使用了export，返回data，但是在webpack编译后生成的页面中，并没有把ES6的写法编译，使得页面报拼写错误。

这个是 package.json文件，依赖包如下

这个是webpack.config文件，我怀疑是哪里配置问题，但是通过对比一些成熟demo没有发现问题所在...

var webpack = require('webpack');
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin  = require('extract-text-webpack-plugin');
var APP_PATH = path.resolve(__dirname,'app/js/');
var DIST_PATH = path.resolve(__dirname,'dist/');

module.exports = {
    entry : {
        index : path.resolve(APP_PATH,'index'),
        list : path.resolve(APP_PATH,'list'),
        dom : path.resolve(APP_PATH,'dom')
    },
    output: {
        path: DIST_PATH,
        filename: 'src/[name].js'
    },
    module : {
        loaders: [
            { test: /\.js$/, loader: 'babel?presets=es2015', exclude: /node_modules/},
            { test: /\.vue$/, loader: 'vue'},
            { test : /\.(less|css)$/, loader: ExtractTextPlugin.extract('style', 'css!less') },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192&name=../imgs/[name].[ext]'}
        ]
    },
    resolve: {
        extensions: ['', '.js', '.vue'],
    },
    plugins:[
        new HtmlwebpackPlugin({
            title: 'index',
            template: './app/tpls/index.html',
            filename: 'index.html',
            chunks: ['index'],
            inject: 'body'
        }),
        new HtmlwebpackPlugin({
            title: 'list',
            template: './app/tpls/list.html',
            filename: 'list.html',
            chunks: ['list'],
            inject: 'body'
        }),
        new HtmlwebpackPlugin({
            title: 'dom',
            template: './app/tpls/dom.html',
            filename: 'dom.html',
            chunks: ['dom'],
            inject: 'body'
        }),
        new ExtractTextPlugin("./style/[name].css")
    ],
    externals: {
        'jquery': 'window.jquery',
    },
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,
    },
}

这个是VUE模版文件

这个是入口文件

目录结构

Answer 1

查了一下，发现了问题所在，我使用的是vue2.0+，应该把版本降回去，另外随着需要变的是把vue-loader版本也降到10.0以下，问题就解决了。需要注意的是，安装了10.0以上的vue-loader的同时安装了一个vue-template-compiler这样的依赖，把这个依赖包也去掉就好。

Answer 2

使用独立的.babelrc配置，就不会出现这个问题了！