webpack和 php配合,javascript - webpack和laravel-elixir-webpack的正确配合方式？
我计划用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的正确配合方式是什么？