随着互联网大潮的兴起,网站定制开发复杂度上升,前端社区蓬勃发展,网站定制开发前端构建已经是开发工作中一个绕不开的话题。上图罗列了前端的很多东西,除了一些类库,其他基本都和构建有一定的关系。

在前端旧时代,JavaScript本身就缺乏模块化相关规范的支持,而现今也并非所有浏览器都支持新的JavaScriptModule,所以在前端构建中,代码模块打包几乎就是最重要的一部分。

网站定制开发

上图简单地比较了当前前端社区比较流行的四个模块打包工具——webpack、browserify、rollup、parcel-bundler2018年1月npm包下载量和GitHubstars数量,很明显,webpack可以说是最为人所知,使用量最大的一个。

从GitHub的webpack代码仓库的master贡献图来看,webpack从2012年开始,主代码仓库都相当活跃,尤其是2017年,更是有了巨大的变化。

期间,webpack经历了几个主要版本变更,从开始火热的1.x版本,经过了2.x,3.x,走到了现在还在成长中的4.x版本,webpack在不断地完善中。整个webpack社区一直是相当活跃的,周边相关的插件等基本覆盖了前端日常开发工作所需,随时代发展,也添加了不少新特性,如tree-shaking等。

至今,webpack已经成为家喻户晓的前端打包工具,是当前可以使用的前端代码模块打包工具中最具代表性的一个。

前端开发环境分析

使用过webpack的都了解,webpack本身具备了诸多优点:从单一入口出发,打包所有前端资源,使用loader处理多种代码语言的转换,使用plugin扩展原有的模块打包流程,使用HMR提升开发体验,利用代码压缩和代码分割来提升前端加载性能等。

我们可以发现,在大多数项目中,webpack已经可以成为构建工作的主心骨,应该具备的功能都已经具备,对webpack的了解几乎成了前端开发人员必不可少的技能之一。

网站定制开发前端开发环境分析

但是一直以来,webpack文档说明为人所诟病,由于webpack本身功能就具备一定的复杂性和自由度,文档总是难以面面俱到(3.x版本已经改善了相当多,4.x的文档还在努力准备中),部分细节没有深入,也比较少去讲述webpack面向具体构建需求时的使用。同时,webpack源码的可读性一般,开发者遇见问题时难以开发调试,普遍停留在webpack的基础使用上,不敢大刀阔斧地用来定制舒服的开发流程。

我们可以在社区中找到很多关于webpack的文章,有不少相当实用的,可以帮助新手快速入门webpack,也有不少相当深入的,可以从某一层面剖析如何更好地使用webpack,但总归是零零散散,缺乏一个相对系统化的webpack学习指南。

评论

电子邮件地址不会被公开。