使用javascript捆绑程序演练问题

我知道有一些任务管理器/捆绑程序,比如webpack或npm脚本,它们可以执行任务,比如在需要传输的js文件上运行babel,将它们捆绑在一起,最终生成丑陋的产品

我来自一个非常短的vanilla js背景,目前我只是像这样连续导入我的所有脚本:

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

当然,这会产生一些问题,比如依赖关系需要井然有序等等。然而,使用开发人员工具进行调试非常容易,因为我可以简单地转到源代码,选择所需的文件并指定断点。

问题1:
如果将所有内容捆绑到一个索引中。js文件,这不意味着调试起来要繁琐得多,因为我需要浏览一个巨大的索引。js单个文件来决定断点应该放在哪里?你是怎么处理的?

问题2:
如果一切都捆绑在一个巨大的索引中。js,导入有什么用?我仍然有点不清楚导入的工作原理,目前声明的所有内容基本上都附加到窗口对象(或nodejs的全局)。

问题3:
你会为初学者推荐什么捆绑包?我试图从头开始在我的例程中编写所有任务,如transpiling FLOW和JSX,而不是使用现成的工具,因为我想很好地理解每个部分的功能。

问题4:
据我所知,该过程通常应如下所示:

A2)CSS透明(适用于LESS等语言)
B) 捆绑
C) 丑化(我认为这应该只用于生产,否则调试是不可能的)

如果我说的话揭示了我对某事的误解,请为我指出,因为在这个阶段,我不知道我不知道什么。

谢谢。