引言
现在的前端工程，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的学习思路。大家可以按流程，再逐步深入的去看源代码，学习源代码。
学习源码，既可以让我们理解技术的本质，同时也可以学习优秀的代码风格，规范以及思路。
本文都是作者的个人理解，有不当之处欢迎批评指正。
网友评论