title: 'import' and 'export' may only appear at the top level
body: <p>I'm using webpack with vuejs. Webpack does its thing, but when I look at the outputted app.js file, it gives me this error. </p>
  
  <blockquote>
    <p>'import' and 'export' may only appear at the top level</p>
  </blockquote>
  
  <p>I'm assuming it's a problem with babel not converting the code? Because I'm getting this in the browser when viewing the application.</p>
  
  <blockquote>
    <p>Unexpected token import</p>
  </blockquote>
  
  <p><strong>Here's my entry.js for my vuejs application:</strong></p>
  
  <pre><code>/*jshint esversion: 6 */
  import Vue from 'vue';
  import App from './App.vue';
  import VueRouter from 'vue-router';
  Vue.use(VueRouter);
  require('./css/style.scss');
  
  // Export the vue router
  export var router = new VueRouter({
    hashbang: false,
    root: '/'
    // history: true
  });
  
  // Set up routing and match routes to components
  router.map({
    '/': {
      component: require('./components/home/Home.vue')
    }
  });
  
  // Redirect to the home route if any routes are unmatched
  router.redirect({
    '*': '/'
  });
  
  // Start the app on the #app div
  router.start(App, '#app');
  </code></pre>
  
  <p><strong>Here's my webpack.config.js:</strong></p>
  
  <pre><code>var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var path = require('path');
  
  module.exports = {
    entry: './src/entry.js',
    output: {
        filename: './public/js/app.js'
    },
    devtool: 'source-map',
    plugins: [
      new ExtractTextPlugin('./public/css/style.css')
    ],
    module: {
      preLoaders: [{
          test: /\.js$/, 
          exclude: /node_modules/,
          loader: 'jshint-loader'
      }],
      loaders: [{
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract(
              'style',
              'css!sass'
          ),
      },
      {
          test: /\.vue$/,
          loader: 'vue'
      },
      {
          test: /\.js$/,
          exclude: /node_modules/,
          include: [
            path.resolve(__dirname, "src/services"),
          ],
          loader: 'babel-loader',
          query: {
            presets: ['es2015']
          }
      }]
    }
  };
  </code></pre>
  
  <p>Here's my packages.json file:</p>
  
  <pre><code>{
    "name": "test-webpack",
    "version": "1.0.0",
    "description": "Myapp",
    "main": "entry.js",
    "scripts": {
      "watch": "webpack-dev-server  --host $IP --port $PORT  --hot --inline --config webpack.config.js",
      "dev": "webpack",
      "build": ""
    },
    "author": "Dev",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^6.9.1",
      "babel-loader": "^6.2.4",
      "babel-plugin-transform-class-properties": "^6.10.2",
      "babel-plugin-transform-runtime": "^6.9.0",
      "babel-preset-es2015": "^6.9.0",
      "babel-runtime": "^6.9.2",
      "css-loader": "^0.23.1",
      "extract-text-webpack-plugin": "^1.0.1",
      "jshint": "^2.9.2",
      "jshint-loader": "^0.8.3",
      "node-sass": "^3.8.0",
      "path": "^0.12.7",
      "sass-loader": "^3.2.0",
      "style-loader": "^0.13.1",
      "vue-hot-reload-api": "^1.3.2",
      "vue-html-loader": "^1.2.2",
      "vue-loader": "^8.5.2",
      "vue-style-loader": "^1.0.0",
      "webpack": "^1.13.1",
      "webpack-dev-server": "^1.14.1"
    },
    "dependencies": {
      "vue": "^1.0.25",
      "vue-router": "^0.7.13"
    }
  }
  </code></pre>