laravel5.3和vuejs结合使用，打包js和css文件问题

以前用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？有点混淆，这样好吗？

黄舟2752 天前577

laravel5.3和vuejs结合使用，打包js和css文件问题

全部回复(1)我来回复