补充一点：作为一门脚本语言，在没有node的时候，只能通过<script>标签插进html去运行，单个的文件离开了html他什么都不是。如果一个网站功能很多，我要按照功能划分写15个文件，那我就要插入15个<script src="">去引那些文件，还tm得注意引用顺序和插入的位置，一方面难以维护，一方面增加了网页加载时的请求数量（15个不算多，如果是200个文件的话，那得多蛋疼）。

自从有了node之后，单个的文件离开了html以后也可以在终端run起来了，我们前端可以和别的语言一样在命令行里玩编程！模块化标准实施之后，就有了“引入”和“导出”的概念，这带来的革命性变化便是：当我们写业务的时候再也不用蛋疼地去在html里写15个<script src="">去运行了。我只要插入一个作为入口的总的script标签，另外的14个文件都作为模块导出，并导入到这个入口的（通常叫main.，这15个文件也可以互相导入导出什么的，毕竟在node环境下，每个文件都是一个单独的模块）。

但问题在于，一旦文件以<script src="">的形式插入html，那么require、export、import之类的模块语法就会报错，因为浏览器不支持模块化，模块语法是建立在node的环境下才有的。webpack等打包工具的一个作用就是让我们插入一个script标签的同时，还允许我们在文件之间使用export、import、require这些语法，并且非常智能地把这些模块合并压缩成1个（或2个或以上）大大的紧实的文件。

总结：打包工具可以让我们在开发网页的时候使用import export require，像后端程序员那样进行模块化开发。

应该是因为你目前接触到的前端项目还没有这种场景，有了你就瞬间明白了。

比如你在项目里面使用 SCSS 来写 CSS，这样在发布前，你就需要有一个编译、打包的过程了，将 SCSS 文件编译成 CSS，并且合并起来。

如果模块化的开发 JS，为了减少请求（每个模块异步请求加载），也会打包，把它们合并成一个 JS 文件，以减少请求提高性能。