title: Laravel 5.3 and Vue Webpack setup
body: <p>Hello I am getting JS errors in app.js. Basically it is not liking require('./bootstrap'); and gives the error:</p>
  
  <pre><code>all.js:50750 Uncaught ReferenceError: require is not defined
  </code></pre>
  
  <p>My app.js:</p>
  
  <pre><code>/**
   * First we will load all of this project's JavaScript dependencies which
   * include Vue and Vue Resource. This gives a great starting point for
   * building robust, powerful web applications using Vue and Laravel.
   */
  
  require('./bootstrap');
  
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */
  
  Vue.component('example', require('./components/Example.vue'));
  
  const app = new Vue({
      el: '#app'
  });
  </code></pre>
  
  <p>my package.json:</p>
  
  <pre><code>{
    "private": true,
    "scripts": {
      "prod": "gulp --production",
      "dev": "gulp watch"
    },
    "devDependencies": {
      "bootstrap-sass": "^3.3.7",
      "buble": "^0.13.2",
      "buble-loader": "^0.3.1",
      "css-loader": "^0.25.0",
      "gulp": "^3.9.1",
      "jquery": "^3.1.0",
      "laravel-elixir": "^6.0.0-11",
      "laravel-elixir-vue-2": "^0.2.0",
      "laravel-elixir-webpack-official": "^1.0.2",
      "lodash": "^4.16.2",
      "style-loader": "^0.13.1",
      "vue": "^2.0.3",
      "vue-hot-reload-api": "^1.2.0",
      "vue-html-loader": "^1.2.3",
      "vue-loader": "^9.7.0",
      "vue-resource": "^1.0.3",
      "vue-style-loader": "^1.0.0",
      "webpack": "^1.13.2"
    }
  }
  </code></pre>
  
  <p>Example.Vue:</p>
  
  <pre><code>    &lt;template&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-8 col-md-offset-2"&gt;
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading"&gt;Example Component&lt;/div&gt;
  
                          &lt;div class="panel-body"&gt;
                              I'm an example component!
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          mounted() {
              console.log('Component ready.')
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I also have a webpack.config.js:</p>
  
  <pre><code>'use strict'
  
  const path  = require('path')
  
  module.exports = {
      module: {
          loaders: [
              {
                  test: /\.js$/,
                  include: path.join(__dirname, 'resources/assets'),
                  exclude: /node_modules/,
                  loader: 'buble',
              },
              {
                  test: /\.vue$/,
                  loader: 'vue',
              },
              {
                  test: /\.css$/,
                  loader: 'style!css'
              },
          ]
      },
  }
  </code></pre>
  
  <p>bootstrap.js file</p>
  
  <pre><code>window._ = require('lodash');
  
  /**
   * We'll load jQuery and the Bootstrap jQuery plugin which provides support
   * for JavaScript based Bootstrap features such as modals and tabs. This
   * code may be modified to fit the specific needs of your application.
   */
  
  window.$ = window.jQuery = require('jquery');
  require('bootstrap-sass');
  
  /**
   * Vue is a modern JavaScript library for building interactive web interfaces
   * using reactive data binding and reusable components. Vue's API is clean
   * and simple, leaving you to focus on building your next great project.
   */
  
  window.Vue = require('vue');
  require('vue-resource');
  
  /**
   * We'll register a HTTP interceptor to attach the "CSRF" header to each of
   * the outgoing requests issued by this application. The CSRF middleware
   * included with Laravel will automatically verify the header's value.
   */
  
  Vue.http.interceptors.push((request, next) =&gt; {
      request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
  
      next();
  });
  
  /**
   * Echo exposes an expressive API for subscribing to channels and listening
   * for events that are broadcast by Laravel. Echo and event broadcasting
   * allows your team to easily build robust real-time web applications.
   */
  
  // import Echo from "laravel-echo"
  
  // window.Echo = new Echo({
  //     broadcaster: 'pusher',
  //     key: 'your-pusher-key'
  // });
  </code></pre>
  
  <p>my gulpfile.js</p>
  
  <pre><code>const elixir = require('laravel-elixir');
  
  require('laravel-elixir-webpack-official');
  
  /*
   |--------------------------------------------------------------------------
   | Elixir Asset Management
   |--------------------------------------------------------------------------
   |
   | Elixir provides a clean, fluent API for defining some basic Gulp tasks
   | for your Laravel application. By default, we are compiling the Sass
   | file for our application, as well as publishing vendor resources.
   |
   */
  var paths = {
      'cssstyles': 'resources/assets/css/',
      'jsscripts': 'resources/assets/js/',
  
      'adminlte': 'vendor/bower_components/AdminLTE/',
      'bootstrap': 'vendor/bower_components/bootstrap/',
      'chartjs': 'vendor/bower_components/Chart.js/dist/',
      'fastclick': 'vendor/bower_components/fastclick/',
      'fontawesome': 'vendor/bower_components/font-awesome/',
      'jquery': 'vendor/bower_components/jquery/',
      'slimscroll': 'vendor/bower_components/slimScroll/',
      'datatables': 'vendor/bower_components/datatables.net/',
      'moment': 'vendor/bower_components/moment/',
      'bootstrapgrowl': 'vendor/bower_components/bootstrap-growl/'
  }
  
  elixir.config.sourcemaps = false;
  
  
  elixir(function(mix) {
      mix.sass('app.scss', paths.cssstyles)
          .styles([
              paths.bootstrap + 'dist/css/bootstrap.css',
              paths.fontawesome + 'css/font-awesome.css',
              paths.adminlte + 'plugins/datatables/dataTables.bootstrap.css',
              paths.adminlte + 'dist/css/AdminLTE.css',
              paths.adminlte + 'dist/css/skins/skin-blue.css',
              paths.adminlte + 'plugins/select2/select2.css',
              paths.cssstyles + 'dataTables.fontAwesome.css',
              paths.cssstyles + 'app.css'
          ], 'public/css/', './')
  
          .scripts([
              paths.jquery + "dist/jquery.js",
              paths.moment + 'moment.js',
              paths.bootstrap + "dist/js/bootstrap.js",
              paths.datatables + "js/jquery.dataTables.js",
              paths.fastclick + "lib/fastclick.js",
              paths.adminlte + "dist/js/app.js",
              paths.adminlte + 'plugins/daterangepicker/daterangepicker.js',
              paths.adminlte + 'plugins/select2/select2.js',
              paths.adminlte + 'plugins/datatables/dataTables.bootstrap.js',
              paths.slimscroll + "jquery.slimscroll.js",
              paths.chartjs + "Chart.js",
              paths.bootstrapgrowl + 'jquery.bootstrap-growl.js',
              paths.jsscripts + "app.js"
          ], 'public/js/', './')
  
  
      mix.webpack('app.js');
  
  });
  </code></pre>
  
  <p>I have spent hours on this and the documentation on the web is not very clear as I am confused between browserify and webpack. I do want to state that I am not very front end savvy. Just want to have things in order so that can utilize Vue in future. Thank you for your assistance. </p>