Guide: Add webpack to Your Laravel-Elixir Ext for Vue Js Components

Since the majority of VueJS developers and Creator Even You are using Webpack...

And most of us Laravel developers are acquainted with Laravel Elixir as a Wrapper of Gulp....

We Find Trouble Using Webpack... But Not Anymore.

;) Grin...

Here is my Documented Step by Step Guide From Zero To Hero!

1.) Setting Up ENV Machine (Im Using Latest)

Node v5.10.1

npm v3.8.3

2.) Install Globally Gulp and Webpack

(Gulp version 3.9.1)

npm install --global gulp 

(Webpack 1.13.0)

npm install --global webpack

3.) Update Your Package.json File

and add the following dependencies

Note: vuestrap-theme-loader is optional only if you need to use kzim vuestrap components library

if you intend to use .vue file extension you need 3 dependencies

vue-loader vue-html-loader vue-style-loader

{
  "name": "run-webpack-inside-laravel-elixir",
  "version": "1.0.0",
  "description": "Dependencies to Use Webpack Extension inside Laravel Elixir",
  "license": "MIT",
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0"
  },
  "dependencies": {
    "laravel-elixir-webpack-ex": "0.0.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-stage-2": "^6.5.0",
     "babel-plugin-transform-runtime": "^6.8.0",
    "autoprefixer-loader": "^3.1.0",
    "babel-core": "^6.7.7",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.4",
    "css-loader": "^0.23.1",
    "html-loader": "^0.4.3",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "vuestrap-theme-loader": "^0.1.2",
   "vue-loader": "^8.3.1",
    "vue-html-loader": "^1.2.2",
    "vue-style-loader": "^1.0.0"
  }
}

4.) Create .babelrc file

Add this inside .babelrc in your root folder

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

5.) Update gulpfile.js

Note if You Dont Need Much Configuration You Dont Need to Pass in webpack.config.js first param (file to compile) 2nd param optional (webpack config) 3rd param optional (output folder) 4th param entry point folder

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

elixir(function(mix) {
        mix.webpack('vuestrap.js', require('./webpack.config.js'), 'resources/assets/js', 'resources/assets/webpack');

});

6.) Create webpack.config.js (if you need more configuration)

Note that Since We will be Using laravel elixir webpack extension We Need to Remove Entry Point and Output Inside webpack.config.js

Since we know laravel elixir webpack ext is using

Entry point Default

./resource/assets/js

Output Folder

./public/js

You can easily change this inside gulpfile.js as the third and 4th param Also if You Need More Power in your laravel-elixir-webpack extension

You can pass in the webpack.config.js as third param

for example , Im using a themeloader in my project (vuestrap) by kzima i can add it here ...

if i will simple use mix.webpack i cannot passon that themeloader object...

See the themeloader and the vuestraploader below

var path = require('path');

module.exports = {
  resolve: {
    root: path.resolve('./')
  },
  themeLoader: {
    themes: ['./resources/assets/sass/theme.scss', './node_modules/vuestrap/theme/bootstrap.scss'],
  },
  module: {
    loaders: [{
      test: /\.vue$/,
      loader: 'vue'
    }, {
      test: /\.js$/,
      loader: 'babel'
    }, {
      test: /\.html$/,
      loader: 'html'
    }, {
      test: /\.scss$/,
      loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader!vuestrap-theme-loader'
    }]
  }
};

7.) in your App.js ...

The Usual Vue JS Dependencies

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router';
// Import VueStrap Core That has the Core Sass Files of Boostrap Add What you Need
import 'vuestrap/core'
...
// Import The Components for Vuestrap Base Bootsrap 4
import navbar from 'vuestrap-base-components/src/components/navbar'
...
//import GritCode Components
import toast from 'gritcode-components/src/components/toast'
...
//import view components for Router
import default_view from '../components/default.vue'

// Use Vue Router
Vue.use(VueRouter)
// Use Vue Resource
Vue.use(VueResource)

var router = new VueRouter({})
router.map({
'*': {
          component: default_view
      }
})
var App = Vue.extend()

router.start(App, '#app')

new Vue({
el: '#app',
data: { },
components: {
'vs-navbar': navbar
}
 })

8.) Run Gulp ...

If you Love this Guide Show , Ill add more ... in the Future THANKS >;D