为什么需要构建工具？
前端项目是由一系列文件资源组成的，这些资源可以是逻辑代码，也可以是样式代码或者静态资源。前端经过漫长的迭代，很多功能化的问题越来越明显。首先是模块化的问题，从字面上理解就是把项目拆分成不同模块，分别进行开发和维护，这样就可以把项目拆分为不同的部分分而治之。在其他的语言中有一些标准的模块化规范，但是在前端的JS中却没有统一的规范，十年前到现在已经诞生了非常多的业界规范，目前为止主要有三个分别是ESM、CommonJS、UMD，但还没有形成统一，模块化在前端工程上仍是一个问题。第二个是资源编译的问题，当今的前端工程里可以看到TS或JSX这些高级语法，这些高级语法基本成了项目的标配，这些语法浏览器是不认识的，所以要编译为浏览器可以识别的形式，这背后涉及到一系列的工具链，因此，对于各种工具链的集成也成为了刚需。第三个是中间产物的质量问题，比如线上的代码需要压缩，如果不压缩代码体积比较庞大，会影响到线上性能和用户体验，对于未使用的模块需要将他们从中间产物中剔除掉来优化产物体积。最后一个是开发效率，比如改动代码后要立刻看到效果，这样来提高开发效率和体验，但是没有构建工具这一层工具来做，开发效率不能得到提高。
前端构建工具的意义
，
在模块化方案上，构建工具会提供统一的模块加载规范实现模块加载方案。语法转译方面，工具一般会集成一系列的编译工具链，比如Sass、TypeScript，还有静态资源的加载，如图片、字体、worker。产物质量方面，构建工具对产物压缩、无用代码剔除、语法降级。开发效率方面，一般构建工具会提供热更新的系统用来支持改动代码后立即看到改动代码的效果。
