Webpack原理-入门篇

引言

        现在的前端工程，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的学习思路。大家可以按流程，再逐步深入的去看源代码，学习源代码。

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

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