前端工程构建总结

什么是前端工程构建，咱们先回想一下。

开发中，咱们不少时候只须要关心业务代码，而不用过多关心业务之外的，打包、兼容、优化、部署等等工做。

简单说，工程构建就是打通开发链路，让开发能够专一于项目自己。

解决了什么

在拥有较完善的工程构建之前，前端常常面临这些问题：

• 大量js文件经过script标签引入，形成管理困难，页面加载缓慢。

• css编写效率低，兼容性问题多，全靠手动本身解决。

• 常常耗费大量时间手动传资源到CDN，改静态资源路径。

• 甚至手动拷贝代码到后端工程。

等等不少效率低下、易犯错，与业务自己无关的繁琐工做。

而前端工程的完善，就是帮助开发去解决以上问题，让开发用的爽。

工程构建介绍

概括起来，工程构建包括这3个方面：打包；自动化；其余辅助功能；

1.1 打包

将源码打包成用户访问的优秀代码。

利用webpack等打包工具，将代码文件打包，生成公共和页面的js、css文件，以及最终可用的html文件

经过打包，可让打包工具自动帮咱们管理包依赖，代码压缩，页面兼容。

而且可让咱们在开发和生成环境中，支持es6等语法，提高开发效率。

1.2 自动化

人工操做繁琐易出错，能省则省。

一方面是咱们在代码打包中提到的，省去人工的代码压缩、兼容等工做。

另外一方面是打包后自动更新html中地方资源路径，自动上传CDN，自动部署等操做。

1.3 其余辅助功能

还有更多优秀的做用。

举个咱们推啊项目中的栗子：

经过webpack插件，自动使css中的背景图支持webp，减少用户加载图片的体积。

End

前端工程构建做为前端架构的一个子集，在推啊前端er的共同努力下，正在变得愈来愈自动化，愈来愈好用。