前端打包

为什么要打包 转载

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

自从有了node之后，单个的js文件离开了html以后也可以在终端run起来了，我们前端可以和别的语言一样在命令行里玩编程！
模块化标准实施之后，js就有了“引入”和“导出”的概念，这带来的革命性变化便是：当我们写业务的时候再也不用蛋疼地去在html里写15个< script src="">去运行js了。我只要插入一个作为入口的总的script标签，另外的14个js文件都作为模块导出，并导入到这个入口的js（通常叫main.js，这15个js文件也可以互相导入导出什么的，毕竟在node环境下，每个js文件都是一个单独的模块)。但问题在于，一旦js文件以< script src="">的形式插入html，那么require、export、import之类的模块语法就会报错，因为浏览器不支持模块化，模块语法是建立在node的环境下才有的。
webpack等打包工具的一个作用就是让我们插入一个script标签的同时，还允许我们在js文件之间使用export、import、require这些语法，并且非常智能地把这些js模块合并压缩成1个（或2个或以上）大大的紧实的js文件。
总结：打包工具可以让我们在开发网页的时候使用import export require，像后端程序员那样进行模块化开发。

转载二

打包是在做什么

• 前端写代码时为了方便会将代码写在许多文件中，但是转化成HTML代码时，会使用<
  script>标签进行引入js代码，这样会使页面进行的http衍生请求次数的次数增多，页面加载耗能增加。
  使用打包过后将许多零碎的文件打包成一个整体，页面只需请求一次，js文件中使用模块化互相引用（export、import），这样能在一定程度上提高页面渲染效率。
• 打包同时会进行编译，将ES6、Sass等高级语法进行转换编译，以兼容低版本的浏览器

必须要打包吗？

打包一个重要作用是编译，将浏览器无法识别的ES6等高级语法编辑成浏览器可识别的语法，但假如有一天浏览器可以识别ES6甚至ES7等语法，那么Babel、webpack等打包工具就不是必须的了。
也就是，其实还是为了将使用了高级语法的代码（比如es6的import和export），转化为浏览器可以识别的代码。

常用打包工具有webpack等