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 是可行的。

 

謝謝