关于构建项目的理解

1，什么是构建项目？

        前端项目中，项目的构建可以理解为编译，是要将源代码转化成宿主浏览器可以执行的代码，核心是对资源的管理，产出包括JS,CSS,HTML等资源。

        项目构建过程一般在脚手架创建初始项目文件之后，程序员编写完主要功能，需要进一步对项目文件进行处理。

2，构建需要解决的问题

        a,面向语言

              ECMAScript规范的转译，将领先于浏览器实现的JS代码转译成标准的浏览器可识别的规范代码（Babel）

              CSS预编译语法转译，将SASS，LESS编写的代码转化为标准CSS语法

              HTML模板渲染，将Jade/EJS/Mustache等模板语法转换为标准HTML

        b,面向优化

              依赖打包，分析文件之间的依赖关系，将同步依赖的文件打包在一起，减少HTTP请求

              资源嵌入，将小的图片编译为base64的格式嵌入文档减少HTTP请求

              文件压缩，减少文件体积

              hash指纹，给文件加入hash指纹应对浏览器缓存策略

        c,面向部署

              域名/路径改变，开发环境和线上环境域名变化，资源部署的服务器不同

              文件名改变，内容改变导致hash指纹改变，则文件名改变

3，常用构建工具——webpack

        Babel编译器，CSS预编译，postCSS前缀处理，CSS Sprites

 

总结自：《前端工程化--体系设计与实践》  ——周俊鹏