Using a javascript bundler walkthrough questions

Question

I am aware that there are a few task managers/bundlers out there like webpack or npm scripts that perform tasks like running babel on js files that need transpiling, bundle them all together, uglify the final product etc.

Im coming from a very short vanilla js background and currently im simply importing all my scripts serially like so :

<script src"1.js></script>
<script src"2.js></script>
..etc

This of course creates issues like dependencies needing to be in order etc. As is however, debugging with the developer tools is quite easy as i can simply go to Sources, pick the file i need and specify the breakpoints.

Question 1:
If everything was to be bundled into one index.js file, wouldnt that mean it's much more tedious to debug as i need skim through a huge index.js single file to decide where my breakpoints should go? How do you deal with that?

Question 2:
If everything is bundled in one huge index.js, whats the use of import? Im still a little unclear as to how import works in general, currently everything thats declared is essentially attached to the window object (or global for nodejs).

Question 3:
What bundler would you recommend for a beginner? Im trying to write all tasks like transpiling FLOW and JSX in my routines from scratch instead of using something ready as i'd like to get a good understanding of what each part does.

Question 4:
As i understanding the process should normally look like:

A1) JS Transpilation
A2) CSS Transpilation ( for languages like LESS )
B) Bundling
C) Uglification ( i assume this should only be used for production as debugging would be impossible otherwise )

If something im saying unveils my misunderstanding of something please point it out for me as at this stage i dont know what i dont know.

Thanks a lot.

Answer 1

1. Tools like webpack can produce source maps which can be used even by the browser debugger (DevTools) directly as well as by most IDEs to correlate your breakpoints between source and bundle code.
2. Imports are used by bundlers to understand what and in which order to bundle. Also imports might be supported by browsers directly in the future.
3. Webpack (but it's opinionated) Others: Rollup, SystemJs...
4. Uglification is possible even for debugging since you can have source maps for uglified code as well.