I have been struggling all day to make this work, but I haven't had any luck. If someone could provide some insight, it would be greatly appreciated.
My goal is to set up an environment for working with ES6 files and Vue using Webpack.
I have installed all the necessary dependencies and created the following files:
webpack.config.js
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'
}
]
}
};
gulpfile.js
var gulp = require('gulp'),
webpack = require('webpack-stream');
gulp.task('script', () => {
"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']);
resources/assets/source/js/app.js
var Vue = require('vue');
import Alert from './components/Alert.vue';
new Vue({
el: '#app',
components: { Alert },
ready() {
alert('ready');
}
});
resources/assets/source/js/components/Alert.vue
<template>
<div :class="alertClasses" v-show="show">
<slot></slot>
<span class="Alert__close" @click="show == false">x</span>
</div>
</template>
<script>
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'
};
}
}
};
</script>
After running gulp, everything is bundled and compiled. However, when I try to run it in the browser, I encounter an error:
Uncaught SyntaxError: Unexpected token importresources/assets/source/js/app.jsAfter spending hours trying to troubleshoot the issue, I am at a loss and would appreciate any assistance. Thank you.