webpack学习再回顾

在我的心中,webpack是一个变革者,他提供了前端一个全新的开发模式,并将这一职业推向一个新的高点。

追溯webpack的起源

这些年互联网发展迅速,越来越多的网站以及web应用的需求不断增加,一个井喷的web程序井喷的时代,为数不多的程序猿们,如何应对呢?自然,得提高效率嘛,于是大家就想办法提高效率,怎么提高呢?啦啦啦,此处省略一千字,答案是web设计师行业开始变更为前端工程师,前后端概念出现,简单的说,前端负责人机交互、内容的良好呈现、把需要的信息提交给后端,而后端即服务器端,负责处理服务器问题、与前端交互、以及数据的处理并与数据库交互。这样初步解决了团队效率问题。日复一日,程序越来越复杂,前端的代码量开始增多,代码维护性出现了性功能问题,哈哈。于是渐渐的,为了解决前端开发工程化复杂的问题,使其代码更加结构化、维护性更好,出现了grunt、gulp、webpack等工具。

webpack概念

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle – 通常只有一个,由浏览器加载。

它是高度可配置的,但是,在开始前你需要先理解四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。不详细解释,如有需要,见其官网。

webpack能力大致描述

我们都知道,前端从大致的方向上看,主要关注点在四个方面,一个是html模板,一个是css样式,一个是javaScript负责的行为逻辑,最后是其他资源,如图片。

  • js需要模块打包,好的,简单的说,webpack内部使用了browserify来处理commonJS和es6的模块的依赖关系来完成打包。你写的jsx语法、es6语法等,浏览器不支持不兼容怎么办?没关系,提前准备了babel的编译器,实现优雅编译。js想要丑化压缩下,没问题,咱有插件系统。

  • 对于css文件,由于webpack本身只理解javaScript,css文件如何打包呢?简单的说,借助loader来实现,css-loader和style-loader就是很好的任务完成者。css-loader出色的完成了css模块化的问题,style-loader出色的完成了在html中对模块化的css插入问题。你写了less,好的,聪明的开发者搞了个less-loader,负责less的编译问题。

  • 图片想要处理下,base64能做得到吗?没问题,咱有url-loader。资源想要集中化一下,没事咱有file-loader。

感受webpack的架构

nodeJS诞生后,各种前端自动化工具成为了可能。webpack出色的架构,很好的解决了自动化过程中需要处理的问题。在我看来,webpack将资源处理或者说应用程序源代码处理,看做一个文件流,甚至可以形象的比喻为一根有很多处理工厂的管道,从这头到那头的过程,自动识别要处理的资源,进行预先设定的加工处理,然后输出。加工厂可以自定义无限扩展,主要分成两类,一类是loader,一类是plugins。loader主要是做文件转换工作的。而plugins是用来做loader不能做的事儿的,因为loader局限在了文件转换,而在打包的生命周期需要执行的任务,它无法完成,插件就是来做这个工作的,比如打包完成需要对js进行执行uglify,这个时候就需要插件来完成这个任务。

废话说完了,嘻嘻。

发表评论

电子邮件地址不会被公开。 必填项已用*标注