When using laravel5.3 and vuejs together, there is a problem with packaging js and css files

Question

I used CDN before, but now I am trying to use gulp and webpack to package js and css files. The idea is a bit confusing. The details are as follows:

I am going to use the elementUI of the Ele.me team, so I configured it according to this article: http://codesky.me/archives/tr...
The final result is gulpfile.jsAnd app.js The file looks like this:
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'
});

Then prepare to package the resources previously introduced using cdn, such as jquery, bootstrap, etc. For details, please see the package.json file:

{
  "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"
  }

Run npm installAfter installing the above package, package the css and js files respectively:

1. For the css file, I added the following lines to the resources/assets/sass/app.scss file, and there seemed to be no problem.

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

2. For js files, I don’t know how to do it. Use the following three packages and try to put them in gulpfile.js and app.js respectively, and run gulp Report an error.

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

Question:
1. As shown at the end above, how should the js file be packaged? It is also a bit confusing whether to use the gulp or webpack command. When should I use the two commands?

2. JS file packaging order problem. For example, the tether above must be in front of bootstrap to avoid errors. In the packaging order, just pay attention to the order of require(). Is that enough? ?

3. Packaging of css files, although there is no problem with the introduction in the above app.scss, but the above app.js file also introduces element-ui css fileimport 'element-ui/lib/theme-default/index.css';, that is, app.scss and app.jsIs there any processing of css in it? A little confusing, is this okay?

Answer 1

Question 1: If .vue uses webpack, it requires vue-loader
Question 2: Sequence
Question 3: The packaging tool can output .js and .css files separately

Supplement: I have a demo of yii2 and vue for reference https://github.com/TIGERB/vue...