How can I combine all the JavaScript my application needs into one file, app.js?

I have been thinking and searching all day for this problem.

app.js is the only javascript file that I need for my application to run. I produce this file by compiling resource/assets/js/app.js. So this file will store all the JavaScript my app needs, but how?

How can I be sure that there are no conflicts in ID's and class names so my JavaScript works correct? Do I have to remember all the ID's I have given to my elements when writing jQuery or HTML to prevent conflicts? How can I make it so a single file will work for all the application?

resource/assets/js/app.js contains the require() lines to include the packages I need. The compiled file has jQuery, Bootstrap, and other packages I need. In addition to this, I need to write some JavaScript to make use of these packages. Where should I store this code? Somehow. this code has to be combined with the app.js too, but how?

A cleaner example would be, let's say I need to do something when window is resized only in the login screen. So I have this code:

$(window).resize(function(){
    //blabla
});

How can I combine this with all the other JavaScripts? This code will clearly make other screens unable to work properly?

So how can I combine all the code I need inside one file, app.js?

I cannot think of a way to solve this, and unable to find any use case of mix about this problem on the internet.

Any help about this issue is very much appreciated.