laravel5.3和vuejs結合使用，打包js和css檔案問題

Question

以前用cdn，現在嘗試一下用gulp、webpack打包js和css文件，想法有點亂，具體是這樣的：

準備使用一下餓了麼團隊的elementUI，所以按照這篇文章進行了配置：http://codesky.me/archives/tr...
最終得到的gulpfile.js和app.js檔案是這樣的：
gulpfile.js：

const elixir = require('laravel-elixir');
const path = require('path');

require('laravel-elixir-vue-2');


elixir(mix => {
    // Elixir.webpack.config.module.loaders = [];

    Elixir.webpack.mergeConfig({
    resolveLoader: {
        root: path.join(__dirname, 'node_modules'),
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    }
});

mix.sass('app.scss')
    .webpack('app.js');
});

app.js：

require('./bootstrap');

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
Vue.use(ElementUI);

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: 'body'
});

接著準備把以前用cdn引進的資源也弄成打包，像是jquery、bootstrap等所有的，詳見package.json檔：

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "bootstrap-sass": "^3.3.7",
    "bootstrap": "next",
    "css-loader": "^0.25.0",
    "element-ui": "^1.0.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "https://github.com/SebastianS90/laravel-elixir-webpack-official/tarball/22a3805996dfb7ca3e4137e9bdcb29232ba9f519",
    "lodash": "^4.16.2",
    "style-loader": "^0.13.1",
    "vue": "^2.0.5",
    "vue-loader": "^9.8.0",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {
    "element-ui": "next",
    "vue": "^2.0.3"，
    "tether": "^1.3.7",
    "holderjs": "^2.9.4",
    "cropper": "^2.3.4"
  }

執行npm install安裝上面的套件之後，分別對css和js檔案打包：

1、對於css文件，我是在resources/assets/sass/app.scss文件中添加如下幾行，好像沒什麼問題。

@import "node_modules/bootstrap/dist/css/bootstrap";
@import "node_modules/tether/dist/css/tether";
@import "node_modules/cropper/dist/cropper";

2、對於js文件，不知怎麼弄，用下面三個包嘗試分別放在gulpfile.js和app.js#中，運行gulp時報錯。

require('tether');
require('holderjs');
require('cropper');

問題：
1、如上最後那裡，js檔案該怎麼打包？該用gulp還是webpack指令也有點混淆，兩個指令分別什麼時候用？

2、js檔案打包順序問題，例如上面的tether要在bootstrap的前面才不會報錯，打包順序注意require()的先後順序就可以了嗎？

3、css檔案的打包，像上面app.scss中引入做雖然沒什麼問題，但是上面app.js檔案中又引入了element-ui 的css檔import 'element-ui/lib/theme-default/index.css';，也就是app.scss和app.js #裡面都有處理css？有點混淆，這樣好嗎？

Answer 1

問題一：如果.vue用webpack，因為需要vue-loader
問題二：順序
問題三：打包工具，可以分開輸出.js、.css檔

補充：我這有yii2和vue的demo可以參考下 https://github.com/TIGERB/vue...