Laravel Mix my javascript code is not running

I'm using Laravel facing a problem when compiling assets. By default laravel provides a wrapper around webpack which is laravel-mix, laravel-mix using file called webpack.mix.js, and by using npm run dev command, laravel-mixcompile all js files into one webpack bundle js file.

Code of webpack.mix.js:

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

I have a Main.js file which has some jquery code.

Main.js:

;( function( $, window, document, undefined ) {

    'use strict';
    $(window).on('load', function() {
        alert('ready');
    });
 }
)( jQuery, window, document );

My directory structure is something like this

resources\assets\js

app.js
bootstrap.js
Main.js

Code of app.js:

require('./bootstrap');

Code of bootstrap.js:

try {
    window.$ = window.jQuery = require('jquery');// jquery
    require('bootstrap');// bootstrap framework js
    require('./Main'); // Main.js


} catch (e) {
}

When i type command npm run dev all assets are compile into one file then why my Main.js jquery code which is just an alert popup doesn't execute on the page.

But when i change order of the bootstrap.js file into something like this then my Main.js code is execute.

try {
    window.$ = window.jQuery = require('jquery');// jquery
    require('./Main'); // Main.js
    require('bootstrap');// bootstrap framework js



} catch (e) {
}

Why this thing is happening. Does conflict happen between bootstrap framework js file and Main.js file.