I am trying to dev-build a Vue project with Webpack. As soon as I add script tag in the App.vue file, I get an error in the browser saying Unexpected token export.

//App.vue <template> <p style="background-color:blue,">Hello World!</p> </template> <!-- works perfectly fine without this script tag --> <script> export default { name : 'app' } </script> <style> h1 { color : white; background-color : darkgreen } </style> 

The webpack configuration :

//webpack.config.js const HTMLPlugin = require('html-webpack-plugin') const webpack = require('webpack') // const BabelLoader = { loader : 'babel', test : /\.js$/, exclude : /node_modules/, query : { presets : [ 'es2015', 'stage-2'], plugins: [ 'transform-runtime' ] } } const VueLoaderConfig = { loader : 'vue', test : /\.vue$/, exclude : /node_module/ } // const HTMLPluginConfig = new HTMLPlugin({ template : './src/index.html' }) const CommonsChunkConfig = new webpack.optimize.CommonsChunkPlugin({ name : [ 'vendor', 'bootstrap' ] }) // const config = { // ENTRY entry : { app : './src/app.js', vendor : [ 'vue' ] }, // OUTPUT output : { filename : '[name].[chunkhash].js', path : __dirname + '/dist' }, // PLUGINS plugins : [ HTMLPluginConfig, CommonsChunkConfig ], // MODULE module : { loaders : [ BabelLoader, VueLoaderConfig ] } } // module.exports = config 

The entry point - app.js

//app.js import Vue from 'vue' // import App from './App.vue' // new Vue({ el : '#app', ...App }) 

Note:

• It works perfectly fine until I add the <script> tag in the App.vue file.

Please advice me what could I be missing.

Thanks in advance.