title: Laravel Mix my javascript code is not running
body: <p>I'm using <code>Laravel</code> facing a problem when compiling assets. By default laravel provides a wrapper around webpack which is <code>laravel-mix</code>, <code>laravel-mix</code> using file called <code>webpack.mix.js</code>, and by using <code>npm run dev</code> command, <code>laravel-mix</code>compile all <code>js</code> files into one webpack bundle <code>js</code> file.</p>
  
  <p>Code of webpack.mix.js:</p>
  
  <pre><code>let mix = require('laravel-mix');
  
  mix.js('resources/assets/js/app.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css');
  </code></pre>
  
  <p>I have a <code>Main.js</code> file which has some <code>jquery</code> code.</p>
  
  <p>Main.js:</p>
  
  <pre><code>;( function( $, window, document, undefined ) {
  
      'use strict';
      $(window).on('load', function() {
          alert('ready');
      });
   }
  )( jQuery, window, document );
  </code></pre>
  
  <p>My directory structure is something like this</p>
  
  <pre><code>resources\assets\js
  
  app.js
  bootstrap.js
  Main.js
  </code></pre>
  
  <p>Code of app.js:</p>
  
  <pre><code>require('./bootstrap');
  </code></pre>
  
  <p>Code of bootstrap.js:</p>
  
  <pre><code>try {
      window.$ = window.jQuery = require('jquery');// jquery
      require('bootstrap');// bootstrap framework js
      require('./Main'); // Main.js
  
  
  } catch (e) {
  }
  </code></pre>
  
  <p>When i type command <code>npm run dev</code> all assets are compile into one file then why my <code>Main.js</code> jquery code which is just an alert popup doesn't execute on the page.</p>
  
  <p>But when i change order of the <code>bootstrap.js</code> file into something like this then my <code>Main.js</code> code is execute.</p>
  
  <pre><code>try {
      window.$ = window.jQuery = require('jquery');// jquery
      require('./Main'); // Main.js
      require('bootstrap');// bootstrap framework js
  
  
  
  } catch (e) {
  }
  </code></pre>
  
  <p>Why this thing is happening. Does conflict happen between <code>bootstrap framework js</code> file and <code>Main.js</code> file.</p>