webpack和laravel-elixir-webpack的正确配合方式？

Question

我计划用vuex＋laravel构建一个应用，采用的是vuex的架构方式，同时，我找到了一个组件laravel-elixir-webpack，我想借用这个组件继续使用laravel里面的elixir来完成vue组件的编译。

---

这是我的package.json，这个基本是照搬vuex的package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch",
    "blog": "cd resources/assets/js && webpack-dev-server --inline --hot --config ../../../webpack.shared.config.js"
  },
  "devDependencies": {
    "gulp": "^3.9.1",

    "laravel-elixir-webpack": "^1.0.1",
    "laravel-elixir": "^5.0.0",
    "bootstrap-sass": "^3.3.0",
    "vue-resource": "^0.9.3",
    "vue-router": "^0.7.13",

    "vue": "^2.0.0-alpha.7",
    "vue-loader": "^9.0.3",
    "webpack": "^1.12.8",

    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.1.18",
    "babel-polyfill": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-es2015-rollup": "^1.1.1",
    "babel-preset-stage-2": "^6.1.18",
    "babel-runtime": "^6.0.0",
    "casperjs": "^1.1.0-beta5",
    "chai": "^3.4.1",
    "css-loader": "^0.23.1",
    "eslint": "^2.2.0",
    "eslint-config-vue": "^1.0.0",
    "mocha": "^2.3.4",
    "phantomjs-prebuilt": "^2.1.7",
    "rollup": "^0.32.0",
    "rollup-plugin-babel": "^2.4.0",
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "todomvc-app-css": "^2.0.3",
    "uglify-js": "^2.6.2",

    "webpack-dev-server": "^1.12.1"
  }
}

这是我的gulpfile.js

var elixir = require('laravel-elixir');
require('laravel-elixir-webpack');

elixir(function(mix) {
    mix.sass('front.scss');
    mix.sass('console.scss');

    mix.webpack('main.js', {
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules|vue\/dist|vue-hot-reload-api|vue-loader/
                },
                {
                    test: /\.vue$/,
                    loader: 'vue'
                }
            ]
         }
    });
});

// BrowserSync
elixir(function(mix) {
    mix.browserSync({
        proxy: 'demoblog.io'
    });
});

这是main.js

import vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'

new vue({
    el: '#app',
    store,
    render: h => h(App)
})

然后我在终端中运行gulp，提示编译完成

Rex-MBP:blog rex$ gulp
[17:49:17] Using gulpfile ~/Documents/WorkSpace/Web/blog/gulpfile.js
[17:49:17] Starting 'default'...
[17:49:17] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/front.scss


Saving To...
   - public/css/front.css

[17:49:18] Finished 'default' after 397 ms
[17:49:18] gulp-notify: [Laravel Elixir] Sass Compiled!
[17:49:18] Finished 'sass' after 503 ms
[17:49:18] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/console.scss


Saving To...
   - public/css/console.css

[17:49:18] gulp-notify: [Laravel Elixir] Sass Compiled!
[17:49:18] Finished 'sass' after 29 ms
[17:49:18] Starting 'webpack'...

Fetching Webpack Source Files...
   - resources/assets/js/main.js


Saving To...
   - public/js/main.js

[17:49:18] Version: webpack 1.13.2
      Asset     Size  Chunks             Chunk Names
    main.js  1.79 kB       0  [emitted]  main
main.js.map  1.88 kB       0  [emitted]  main
[17:49:18] gulp-notify: [Laravel Elixir] Webpack Compiled!
[17:49:18] Finished 'webpack' after 320 ms
[17:49:18] Starting 'browserSync'...
[17:49:18] Finished 'browserSync' after 75 μs

但当我打开页面，却提示如下错误：

main.js:1 Uncaught SyntaxError: Unexpected token import

我在网上查了一下，大概意思是webpack没有编译es6的语法（import），我照着网上的资料设置了loader为babel-loader（可在上面的gulpfile.js中找到），但依旧提示这个错误。

---

在下愚钝，烦请各位告知，webpack，laravel，vuex的正确配合方式是什么？

Answer 1

我找到了一篇文章，Laravel 中使用 Vue 组件化开发（配置），通过这篇文章，我解决了webpack不能识别import的问题，相信按照这篇文章应该能够将vuex和laravel整合在一起。

Answer 2

你别误导别人，明明用的gulp，关webpack什么事，为了指正你这个问题我还注册了帐号，学艺不精不要乱说

Answer 3

SyntaxError: import declarations may only appear at top level of a module
为毛我的报错这个，上面的vue组件化开发也看了，前端不太熟，求指教~~(>_<)~~