前端工程化(三)之webpack构建

构建,或者叫做编译,在前端工程体系中的角色是将源代码转化为宿主浏览器可执行的代码,其核心是资源的管理。前端的产出资源包括JS,CSS,HTML,分别对应的源代码是

1.领先于浏览器实现的ECMAScript规范编写的JS代码

2.LESS/SASS预编译语法编写的CSS代码

3.Jade/EJE/Mustache等模板语法编写的HTML代码

以上代码是无法在浏览器环境下运行的,构建工作的核心便是将其转化为宿主可执行代码,分别对应

1.ECMAScript规范的转译

2.CSS预编译语法转译

3.HTML模板渲染


构建还需要包括以下功能

1)依赖打包——分析文件依赖关系,将同步依赖的文件打包在一起,减少HTTP请求数量

2)资源嵌入——比如小于10kb的图片编译为base64格式嵌入文档,减少一次http请求

3)文件压缩——减少文件体积,缩短请求时间

4)hash指纹——通过给文件加入hash指纹,以应对浏览器缓存策略


https://segmentfault.com/a/1190000006178770

详细讲了webpack入门相关知识,值得一看

猜你喜欢

转载自blog.csdn.net/weixin_37719279/article/details/80910378