谢谢你们看我扯手艺，近来在对webpack2举行的设置举行梳理和进修，webpack是在客岁运用vue最先打仗的，个人感觉webpack 融入到编程过程当中，供应了模块化，将种种类型的文件都算作模块，经由过程差别的 loader 举行处置惩罚和代码构造，是一个比较新鲜的编程体验，应该说webpack的编程实用场景比较普遍，能够比较轻易的引入第三方的种种 npm 模块举行运用， 轻易疾速开辟事情。
盘算写几篇文章（假如能对峙的话= =）来总结下 webpack，文章不是教你怎样运用webpack，而是让你更好的相识你在运用的webpack是怎样去运转的 ，想来想去，第一篇就先引见下webpack天生的文件，是怎样去实行的。
webpack 的天生信息
起首我们要先经由过程 webpack 去天生文件（好一句空话），文章一切的代码都会在文章最背面给出链接，下面是本文章运用的代码的目次：
我们如今只需关注js目次，内里有两个进口 app.js、bar.js，然后会援用 es5，es6中的种种测试模块，详细人人能够看代码。然后代码一跑！只见命令行蹭蹭蹭跑出来了很多信息，像下面一样：
起首我们来看下天生的信息:
Asset: 这个一看就邃晓是天生的文件相对于设置中output.path的途径，能够看到图中天生的文件都是在output.path底下的;然后我们细致看下文件名，比方第一个0.fb6d7f4.js,是由[name/chunkname].[hash/chunkhash].js构成的，这个能够在output.filename中设置,关于hash和chunkhash的区分，这个背面会特地经由过程一篇文章举行简介。Size: 这个就没啥好说的，就是天生文件的大小Chunks: 我们会看到有些Chunks是两个数字，有些是一个，实在还能够涌现更多，经由我的一堆试验= =，发明Chunks中的第一个数字，就是这个文件的ChunkId，然背面的是当前这个文件依靠的文件的ChunkId，从图中我们能够看到，第一个文件的ChunkId是0,它依靠的是ChunkId为3的manifest.a890c12.jsChunk Names: 这个就是这个天生文件的chunkName,能够用于文件定名，能够看到假如没有在entry中指定，那末chunkName会即是chunkId
递次加载流程
相识了天生的信息，接下来我们把项目跑起来(能够用 anywhere 跑项目),经由过程chrome developer tool能够看到要求状况
能够看到要求了页面html以后，按递次离别加载了 manifest,index,0,2文件，这里我们先来剖析下文件的支解和加载流程。
支解
能够看到页面的 js 被支解成为了4个文件，一般来讲，一个项目定义了一个 entry point,webpack会以这个entry point作为进口，举行代码回溯，假如存在System.import或者是require.ensure的异步模块挪用，webpack会对运用的模块举行零丁打包，比方文件中的0、2这两个 js，假如没有异步模块挪用，那末会将一切的代码天生在一个文件中，webpack 为了使得打包的代码举行优化，能够运用CommonsChunkPlugin插件对代码举行处置惩罚，将库文件零丁打包，经由过程划定规矩天生对应的 chunk 文件，个中的manifest为 默许的 chunk,个中包括了打包文件的runtime信息，另有webpackJsonp模块加载的封装库，一切的天生模块都是采纳webpackJsonp举行封装的。
manifest
从上面的图中能够看到，浏览器按递次离别加载了 manifest,index,0,2文件，个中manifest相当于webpack的runtime东西，用于做模块加载，其他文件是逻辑文件; manifest中封装了webpackJsonpCallback要领和__webpack_require__要领，下面我们来举行剖析:
webpackJsonpCallback(chunkIds, moreModules, executeModule):webpackJsonpCallback是chunk封装的包装要领，webpack在天生每个chunk的时刻都是经由过程这个要领举行包装的，我们在上面看到的chunksId，会作为第一个参数，被包括进这个chunk的module会被以数组的情势传入第二个参数moreModules中，假如这个chunk中包括能够实行的modules，须要将moduleId传入第三个参数executeModule中，下面是 这个要领的代码片断：
这个要领主要做了下面几件事：加载chunk
我们能够看到这个要领用第一个轮回离别将
chunkIds处置惩罚进入installedChunks对象中，installedChunks对象用于纪录chunk的加载状况，离别用0示意当前的chunkId已加载完成，用一个长度为3的数组示意当前的chunk正在加载中，数据中实在存储着加载过程当中的resolve要领、reject要领和pormise对象，这类只在经由过程require.ensure或者是System.import才会涌现。因而我们能够看到，第一个for轮回中推断假如chunkId在 installedChunks 中存在且不为0，则推断是异步加载的模块已加载胜利，将chunk的resolve要领传入resolves数组，然后背面运转，然后将chunk对应的状况设置为0。假如推断以后不存在，这以为这是一个同步加载的chunk，直接设置为0，示意chunk已加载终了。加载 module
加载
module的逻辑比较简单，推断纯不存在这个module以后，将 其写入modules参数当中运转须要实行的
module假如
executeModule存在，则对个中对应moduleId的模块举行运转
__webpack_require__: 这个对象包括了多个要领，主要用于module和chunk的加载，处置惩罚和运转，下面我们一个一个剖析：__webpack_require__(moduleId):代码以下
这个要领吸收一个moduleId，构建一个 module 对象存入installedModules中，而且初始化这个module, 末了返回module.export__webpack_require__.e(chunkId): 这个要领用于经由过程异步的体式格局加载 chunk 文件，代码以下：
这个要领整体来讲就是加载一个 script文件,天生一个promise对象，当 script 加载完成后运转，又会实行前面的webpackJsonpCallback注册chunk,然后promise.resolve。这内里须要注重的是红框内里的东西，这个涉及到一个优化点，假如没有在运用CommonsChunkPlugin零丁打包manifest，那末一般来讲他会和你指定的其他库经由过程CommonsChunkPlugin打包在一起,那末你会发明纵然你只是修改了库以外的逻辑，库文件天生的文件的hash或者是chunkhash也是会变的，缘由就在于manifest中红框部份是动态天生的，致使文件的 hash 发生变化，不利于缓存，因而发起零丁打包manifest__webpack_require__.oe:定义一个一致的错误处置惩罚函数__webpack_require__.p:这个是和webpack的output.publicPath对应的值__webpack_require__.o:Object.prototype.hasOwnProperty的封装
前面几个要领在ES5的情形下面已充足运转这个模块体系，我们都晓得webpack2加入了对ES6 MODULE的支撑，下面几个__webpack_require__是为ES6运用的：__webpack_require__.d:代码以下:
这个是用于ES6中定名的export比方
webpack 碰到这类export，会对其用__webpack_require__.d举行包装，变成:
__webpack_require__.i:用于返回一个准确的上下文的函数归去，针对的是export直接为一个可运转要领的时刻
以上就是webpack manifest中的大部份主要的函数，实在主要就是经由过程webpackJsonpCallback来注册载入对应的chunk文件，经由过程__webpack_require__来处置惩罚模块的关联。
总结
全部webpack 的在运转时都是经由过程 manifest去做掌握处置惩罚的， webpackJsonpCallback对应的是对加载的chunk文件的处置惩罚，__webpack_require__是对加载模块的处置惩罚，相识这些能够使我们更好的去优化我们的代码，协助我们去调试代码，协助我们在复杂状况下去解决问题供应一些其他的思绪。
末了附上代码：先引见下,webpack-base是我在运用webpack的过程当中本身总结的一套脚手架，文档还没有完美，假如须要文档能够在issue内里提，本次的项目在分支上面开辟，代码点击这里
