vue 2.0 无法编译ES6语法

# vue2.0 webpack 无法编译 ES6 语法

之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码，包括ES6语法也能正常转为ES5语法，但是当使用 vue@2.0 + vue-loader@10.0.2 以后发现，通过 webpack 打包后的代码里面的ES6语法没有转义，google一会后发现，需要在webpack.config.js里单独配置babel的编译规则。一个典型的配置如下：

var webpack = require('webpack');
var vue = require('vue-loader')
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
//插件项
plugins: [
new ExtractTextPlugin("[name].css")
],
//页面入口文件配置
entry: {
index : './src/index.js'
},
//入口文件输出配置
output: {
path: './dist/',
filename: '[name].js'
},
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: '../',
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: '../',
exclude: /node_modules/
}
],
//加载器配置
loaders: [,
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: "babel",
query: {presets: ['es2015']},
exclude: /node_modules/
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("css")
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("css!less")
}
]
},
vue : {
loaders: {
css: ExtractTextPlugin.extract("css"),
less: ExtractTextPlugin.extract("css!less")
},
autoprefixer: { browsers: ["ios_saf >= 7", "android >= 4"] }
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
};

看到最后一个配置了吗？需要单独为babel配置编译规则，vue-loader才能编译ES6语法。

此方法在 vue@2.1.8 , vue-loader@10.0.2 是可行的。

谢谢