Gulp, Vue, Webpack, Babel and Uncaught SyntaxError: Unexpected token import
<p>I've been trying whole day to get it to work without any luck so if someone could shine some light that would be very much appreciated.</p>

<p>I'm trying to set up environment for working with ES6 files as well as Vue using Webpack.</p>

<p>I've installed all dependencies, and created the following files:</p>

<p><strong>webpack.config.js</strong></p>

<pre><code>module.exports = {

    entry: './resources/assets/source/js/app.js',
    output: {
        filename: 'app.js'
    },
    devtool: 'source-map',
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js'
        }
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
};
</code></pre>

<p><strong>gulpfile.js</strong></p>

<pre><code>var gulp       = require('gulp'),
    webpack    = require('webpack-stream');

gulp.task('script', () =&gt; {

    "use strict";

    return gulp.src('./resources/assets/source/js/app.js')
               .pipe(webpack(require('./webpack.config.js')))
               .pipe(gulp.dest('./public/assets/js/'));

});

gulp.task('default', ['script']);
</code></pre>

<p><strong>resources/assets/source/js/app.js</strong></p>

<pre><code>var Vue = require('vue');

import Alert from './components/Alert.vue';

new Vue({

    el: '#app',

    components: { Alert },

    ready() {
        alert('ready');
    }

});
</code></pre>

<p><strong>resources/assets/source/js/components/Alert.vue</strong></p>

<pre><code>&lt;template&gt;

    &lt;div :class="alertClasses" v-show="show"&gt;
        &lt;slot&gt;&lt;/slot&gt;
        &lt;span class="Alert__close" @click="show == false"&gt;x&lt;/span&gt;
    &lt;/div&gt;

&lt;/template&gt;

&lt;script&gt;

    export default {

        props: ['type'],

        data() {
            return {
                show: true
            };
        },

        computed: {

            alertClasses() {

                var type = this.type;

                return {
                    'Alert': true,
                    'Alert--Success': type == 'success',
                    'Alert--Error': type == 'error'
                };

            }

        }
    };

&lt;/script&gt;
</code></pre>

<p>When I rung <code>gulp</code> everything is bundled and compiled, but when I run it in the browser I get <code>Uncaught SyntaxError: Unexpected token import</code> pointing to the line within the <code>resources/assets/source/js/app.js</code> file.</p>

<p>After hours of trying to figure out what might be causing it I've run out of ideas and am on the verge of giving up so would appreciate any help.</p>