构建工具的存在本质是为了帮助我们更好的开发

为什么要构建

开发与生产的矛盾?

开发需要模块化, 帮助我们更好地开发, 但是在生产环境下浏览器自身是无法解析模块化的; 开发过程中会使用到JS的一些新语法以及前端框架的特殊约定写法（TypeScipt、ES6、Vue...）, 但是在生产环境下只认js, 是执行js的, 同时一些老版本浏览器对于ES6支持不全。

因此构建工具可以对模块化的项目进行打包, 将各个分散开的模块合到一个文件, 为了开发方便用到的框架语法以及Js的高级语法, 构建工具可以将这些方便开发而写的特殊写法编译为浏览器认识具有兼容性的JS语法。

总结就是, 开发为了方便, 使用了一些手段进行产品的快速成型, 然后通过构建工具使得这些手段变成了浏览器认识的东西，这也是构建工具的核心工作。

那么构建工具帮助了我们什么?

A.编译浏览器无法理解的东西：

es6、ts、.vue

B.代替一些我们的手动操作

文件合并和拆分、图片压缩、资源处理

以前没有构架工具的时候, 可能就得自己人工去压缩图片, 或者一些资源的处理（转base64）

C.帮助开发

提供了一个开发模式, 可以直接帮助我们启动项目预览到开发效果

为我们提供了

注意：比如 webpack, 他自身其实做的事情就是打包这一件事情, 像那些 ts es6 .vue 等等是交给了一些额外的插件和 loader 来进行处理的，而构建工作自身做的事情就是将我们 import 的一个个模块, 打包到一个文件。

图解：

指定一个文件为起点（如图-1 App.js）, 然后 App.js 引入了 a.js 和 b.js, a.js 又引入了 c.js, 通过构建工具（webpack）,最终结果结果是一个js。