Bundle Webpack

前端

- Bundle(打包)

1.定义

狭义打包：那就是把所有的 js 文件, css 文件都分别压缩合并为一个All in One 的 .js 和 .css 文件, 这样浏览器就可以通过少量的 HTTP 请求获取到所需要的前端资源了, 节省流量, 加快页面加载速度.
广义打包： 我的理解应该是上线发布时的预处理工作吧, 主要有:
（1）TypeScript, LESS 等的预处理
（2）资源的合并压缩, JavaScript可能还会需要模块化, CSS文件可能也需要合并、添加兼容性前缀(-webkit-, -moz-)等
（3.）js 的混淆.

至于打包工具, 流行的有 Gulp, Grunt, Webpack等工具。

- 2.起源

Node.js出现之前，每一个js文件都得用一个< script src="">的形式插入html，当js文件数量巨大时，既产生多次的请求，也增加了维护的难度。
Node.js出现之后，js模块化迅速盛行，单个的js文件也能离开html在终端运行，并产生引入（import）和导出（export）js文件的行为。多个js作为模块导入到main.js，再一次性插入到html中，避免了多次插入。但问题在于，一旦js文件以< script src="">的形式插入html，那么require、export、import之类的模块语法就会报错，因为浏览器不支持模块化，模块语法是建立在node的环境下才有的。webpack等打包工具的一个作用就是让我们插入一个script标签的同时，还允许我们在js文件之间使用export、import、require这些语法，并且非常智能地把这些js模块合并压缩成1个（或2个或以上）大大的紧实的js文件。

- Webpack

• 1
• 2
• 3