Webpack vue error

Question

I have webpack installed globally and have vue and loaders installed locally and have tried installing them globally. I keep getting this error when I run webpack

Module parse failed: /Users/joebob/Development/vue-test/node_modules/babel-loader/index.js!/Users/joebob/Development/vue-test/src/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import Vue from 'vue';

main.js

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

new Vue({
    el: 'body',
    components: { App }
})

config

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

package.json

{
    "name": "vue-test",
    "version": "1.0.0",
    "dependencies": {
        "vue": "^1.0.16"
    },
    "devDependencies": {
        "babel-core": "^6.1.2",
        "babel-loader": "^6.1.0",
        "babel-plugin-transform-runtime": "^6.1.2",
        "babel-preset-es2015": "^6.1.2",
        "babel-preset-stage-0": "^6.1.2",
        "babel-runtime": "^5.8.0",
        "webpack": "^1.12.2",
        "css-loader": "^0.23.0",
        "style-loader": "^0.13.0",
        "vue-loader": "^7.3.0",
        "vue-html-loader": "^1.0.0",
        "vue-hot-reload-api": "^1.2.0"
    }
}

Not sure what I'm missing

Answer 1

You're missing es-2015 transformation.

Pre-6.x, Babel enabled certain transformations by default. However, Babel 6.x does not ship with any transformations enabled. You need to explicitly tell it what transformations to run. The simplest way to do this is by using a preset, such as the ES2015 Preset. You can install it with

npm install babel-preset-es2015 --save-dev

And then setup babel-loader to use it:

config:

module.exports = {
    entry: './src/main.js',      
    output: {              
        path: './dist',
        publicPath: 'dist/',
        filename: 'build.js'
    },
    module: { 
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
                query: {
                  presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    },
    vue: {
        loaders: {
            js: 'babel'
        }
    }
}

Reference:

https://babeljs.io/docs/setup/#webpack