Webpack原理-入门篇

2019-07-27  本文已影响0人  cd2001cjm

引言

        现在的前端工程,webpack处于一个很重要的地位。正好公司的前端同学想深入了解一下webpack,所以就整理了一下相关资料并结合源码,描述了一下个人对webpack的理解。

在对webpack说明之前,我们先想想没有webpack的时候,前端工程一般需要解决的问题有哪些呢?如图:

官方定义

        webpack 是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当 webpack处理应用程序时,它会递归地构建一个依赖关系图(dependencygraph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

通过这张webpack的官方结构图可以看到:

我们前面描述的问题,都可以通过webpack的配置,达到我们想要的输出结果。

Webpack提供的主要功能有:

模块化

文件压缩合并

less或sass预编译

按需加载

es5语法转换

灵活的loader和plugin

哪么webpack是如何做到的呢?

时态

要理解好webpack,首先要明白,webpack有两个时态

编译时:把各种元素编译输出到dist目录的过程

运行时:浏览器加载dist目录文件的过程

我们先来看编译时:

编译命令

常见命令:

好多新童鞋对这3个命令的区别与联系,理解的不是太清晰,在这里详细说明一下,在windows下,我们去分别看一下npm和webpack的cmd文件的内容:

webpack.cmd:

@IF EXIST"%~dp0\node.exe"("%~dp0\node.exe""%~dp0\node_modules\teld-webpack\bin\webpack.js"%*) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;%node"%~dp0\node_modules\teld-webpack\bin\webpack.js"%*)

通过node命令,去调用执行webpack.js.

npm.cmd:

@IF EXIST"%~dp0\node.exe"("%~dp0\node.exe""%~dp0\node_modules\npm\bin\npm-cli.js"%*) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;%node"%~dp0\node_modules\npm\bin\npm-cli.js"%*)

通过node命令去调用npm-cli.js

npm run XXX命令,会去访问package.json中scripts里的XXX,具体执行内容,取决于XXX的配置。(如图)

通常我们说的dev,只是一个脚本变量,执行的内容与后面的配置相关。

总结起来如图所示:输入webpack或npm run XXX指令的时候,实际上都是通过node命令去执行相应的脚本,本质上没有什么不同。所有命令的发起点只有一个:node

编译过程

编译过程就是两条线:

解析编译流程

事件流程

我们逐一结合源码来看。基于webpack版本(3.12.0)

在说编译过程前,大家需要先了解一下Tapable

tapable贯穿于webpack整个过程,关键类Compiler和Compilation都是继承自tapable。plugin先注册到webpack的某个事件,webpack在编译过程中,回去调用该事件。

个人理解:tapable就是一个JS版本的拦截器的实现。

下面我们通过一张图,来了解webpack的整个编译过程:

总体来说,有4个阶段:

参数整理对象初始化阶段

读取webpack.config.js的内容

参数检查转换

初始化Compiler对象并运行

解析依赖编译阶段

初始化Compilation对象

分析入口Entity

创建module

解析依赖创建子module

资源内容替换生成阶段

将公共脚本,chunk,module的内容根据不同的模板进行替换

生成assert

文件输出阶段

每个阶段的主要工作,在该图上都有标注。

理解webpack的事件

this.applyPlugins2("revive-modules",this.modules,this.records);this.applyPlugins1("optimize-module-order",this.modules);this.applyPlugins1("advanced-optimize-module-order",this.modules);this.applyPlugins1("before-module-ids",this.modules);this.applyPlugins1("module-ids",this.modules);this.applyModuleIds();this.applyPlugins1("optimize-module-ids",this.modules);this.applyPlugins1("after-optimize-module-ids",this.modules);this.sortItemsWithModuleIds();this.applyPlugins2("revive-chunks",this.chunks,this.records);this.applyPlugins1("optimize-chunk-order",this.chunks);this.applyPlugins1("before-chunk-ids",this.chunks);this.applyChunkIds();this.applyPlugins1("optimize-chunk-ids",this.chunks);this.applyPlugins1("after-optimize-chunk-ids",this.chunks);

代码是seal方法里的部分触发事件。

当我们开发一个plugin的时候,要能够知道,注册到哪个事件中才能生效。

如果对moduleId的生成方式不满意,想替换,那么要注册到哪个事件中呢?根据上图我们知道,需要注册到before-chunk-ids。

其他情况也是类似:

比如想文件生成完毕后,备份到指定目录。需要注册到done事件中

如果想文件直接生成到指定目录,需要注册到emit事件中

理解启动参数watch

Webpack在编译的时候,会判断是否有watch参数,在有watch参数的情况下:

调用Compiler的watch方法

该方法初始化一个Wathing对象,监听文件目录的变化

当有变化时,会重新触发编译方法

后续流程参考前面的webpack流程图

上面是webpack的编译时,下面来看一下运行时

概念理解chunk与module

简单来说:

chunk :就是一个js文件,也是一个key,也是一个分割单位

module:是chunk文件里面的内容

chunk与module是1对多的关系

webpack公共脚本

3个核心的方法:

webpackJsonp:闭包的方式绑定到window对象上

 __webpack_require__.e:下载js文件并执行

 __webpack_require__:调用module

同时声明了已安装chunk和module的缓存。

chunk文件内容

每一个chunk的js文件,就是一个webpackJsonp函数的调用。

运行时浏览器加载顺序

加载webpack执行所需要的公共脚本

加载入口文件的chunk,执行module

加载页面:

当发现需要加载新chunk时,会调用__webpack_require__.e下载文件

然后执行里面的webpackJsonp函数

运行module,当发现依赖其他module时,通过__webpack_require__去加载

结语

webpack的内容有很多,细节没法在一篇文章中一一道明。

本文通过对webpack编译时和运行时的简单描述,给新入门的同学理一下webpack的学习思路。大家可以按流程,再逐步深入的去看源代码,学习源代码。

学习源码,既可以让我们理解技术的本质,同时也可以学习优秀的代码风格,规范以及思路。

本文都是作者的个人理解,有不当之处欢迎批评指正。

上一篇下一篇

猜你喜欢

热点阅读