摘要：打算寫幾篇文章如果能堅持的話來總結(jié)下，文章不是教你怎么使用，而是讓你更好的了解你在使用的是怎么去運行的，想來想去，第一篇就先介紹下生成的文件，是怎么去執(zhí)行的。

謝謝你們看我扯技術(shù)，最近在對webpack2進行的配置進行梳理和學(xué)習(xí)，webpack是在去年使用vue開始接觸的，個人感覺webpack 融入到編程過程中，提供了模塊化，將各種類型的文件都看成模塊，通過不同的 loader 進行處理和代碼組織，是一個比較新穎的編程體驗，應(yīng)該說webpack的編程適用場景比較廣泛，能夠比較方便的引入第三方的各種 npm 模塊進行使用， 方便快速開發(fā)工作。
打算寫幾篇文章（如果能堅持的話= =）來總結(jié)下 webpack，文章不是教你怎么使用webpack，而是讓你更好的了解你在使用的webpack是怎么去運行的 ，想來想去，第一篇就先介紹下webpack生成的文件，是怎么去執(zhí)行的。

首先我們要先通過 webpack 去生成文件（好一句廢話），文章所有的代碼都會在文章最后面給出鏈接，下面是本文章使用的代碼的目錄：

我們現(xiàn)在只要關(guān)注js目錄，里面有兩個入口 app.js、bar.js，然后會引用 es5，es6中的各種測試模塊，具體大家可以看代碼。然后代碼一跑！只見命令行蹭蹭蹭跑出來了好多信息，像下面一樣：

首先我們來看下生成的信息:

Asset : 這個一看就明白是生成的文件相對于配置中output.path的路徑，可以看到圖中生成的文件都是在 output.path底下的;然后我們仔細看下文件名，比如第一個0.fb6d7f4.js,是由[name/chunkname].[hash/chunkhash].js組成的，這個可以在output.filename 中配置,關(guān)于hash和chunkhash的區(qū)別，這個后面會專門通過一篇文章進行簡介。

Size : 這個就沒啥好說的，就是生成文件的大小

Chunks : 我們會看到有些 Chunks是兩個數(shù)字，有些是一個，其實還可能出現(xiàn)更多，經(jīng)過我的一堆實驗= =，發(fā)現(xiàn)Chunks中的第一個數(shù)字，就是這個文件的 ChunkId，而后面的是當(dāng)前這個文件依賴的文件的ChunkId，從圖中我們可以看到，第一個文件的ChunkId是0,它依賴的是ChunkId為3的manifest.a890c12.js

Chunk 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的異步模塊調(diào)用，webpack會對使用的模塊進行多帶帶打包，比如文件中的0、2這兩個 js，如果沒有異步模塊調(diào)用，那么會將所有的代碼生成在一個文件中，webpack 為了使得打包的代碼進行優(yōu)化，可以使用CommonsChunkPlugin插件對代碼進行處理，將庫文件多帶帶打包，通過規(guī)則生成對應(yīng)的 chunk 文件，其中的manifest為 默認的 chunk,其中包含了打包文件的runtime信息，還有webpackJsonp模塊加載的封裝庫，所有的生成模塊都是采用webpackJsonp進行封裝的。

從上面的圖中可以看到，瀏覽器按順序分別加載了 manifest,index,0,2文件，其中manifest相當(dāng)于webpack的runtime工具，用于做模塊加載，其他文件是邏輯文件; manifest中封裝了webpackJsonpCallback方法和__webpack_require__方法，下面我們來進行分析:

webpackJsonpCallback(chunkIds, moreModules, executeModule):webpackJsonpCallback是chunk封裝的包裝方法，webpack在生成每一個chunk的時候都是通過這個方法進行包裝的，我們在上面看到的 chunksId，會作為第一個參數(shù)，被包含進這個chunk的module會被以數(shù)組的形式傳入第二個參數(shù)moreModules中，如果這個chunk中包含可以執(zhí)行的modules，需要將 moduleId傳入第三個參數(shù) executeModule中，下面是 這個方法的代碼片段：
這個方法主要做了下面幾件事：

加載chunk

我們可以看到這個方法用第一個循環(huán)分別將chunkIds處理進入installedChunks對象中，installedChunks對象用于記錄chunk的加載情況，分別用0表示當(dāng)前的chunkId已經(jīng)加載完成，用一個長度為3的數(shù)組表示當(dāng)前的chunk正在加載中，數(shù)據(jù)中其實存儲著加載過程中的resolve方法、reject方法和pormise對象，這種只在通過require.ensure或者是System.import才會出現(xiàn)。因此我們可以看到，第一個for循環(huán)中判斷如果chunkId在 installedChunks 中存在且不為0，則判斷是異步加載的模塊已經(jīng)加載成功，將chunk的resolve方法傳入resolves數(shù)組，然后后面運行，然后將chunk對應(yīng)的狀態(tài)設(shè)置為0。如果判斷之后不存在，這認為這是一個同步加載的chunk，直接設(shè)置為0，表示chunk已經(jīng)加載完畢。

加載 module

加載 module 的邏輯比較簡單，判斷純不存在這個module之后，將 其寫入modules參數(shù)之中

運行需要執(zhí)行的module

如果executeModule存在，則對其中對應(yīng)moduleId的模塊進行運行

__webpack_require__: 這個對象包含了多個方法，主要用于module和chunk的加載，處理和運行，下面我們一個一個分析：

__webpack_require__(moduleId) :代碼如下
這個方法接收一個moduleId，構(gòu)建一個 module 對象存入installedModules中，并且初始化這個 module, 最后返回module.export

__webpack_require__.e(chunkId) : 這個方法用于通過異步的方式加載 chunk 文件，代碼如下：
這個方法總體來說就是加載一個 script 文件,生成一個 promise對象，當(dāng) script 加載完成后運行，又會執(zhí)行前面的webpackJsonpCallback注冊chunk,然后promise.resolve。這里面需要注意的是紅框里面的東西，這個涉及到一個優(yōu)化點，如果沒有在使用CommonsChunkPlugin多帶帶打包manifest，那么一般來說他會和你指定的其他庫通過CommonsChunkPlugin打包在一起,那么你會發(fā)現(xiàn)即使你只是修改了庫之外的邏輯，庫文件生成的文件的hash或者是chunkhash也是會變的，原因就在于manifest中紅框部分是動態(tài)生成的，導(dǎo)致文件的 hash 產(chǎn)生變化，不利于緩存，因此建議多帶帶打包manifest

__webpack_require__.oe:定義一個統(tǒng)一的錯誤處理函數(shù)

__webpack_require__.p:這個是和webpack的output.publicPath對應(yīng)的值

__webpack_require__.o: Object.prototype.hasOwnProperty的封裝
前面幾個方法在 ES5的情景下面已經(jīng)足夠運行這個模塊系統(tǒng)，我們都知道webpack2加入了對ES6 MODULE的支持，下面幾個__webpack_require__是為ES6使用的：

__webpack_require__.d:代碼如下:
這個是用于ES6中命名的export比如 webpack 遇到這種export，會對其用__webpack_require__.d進行包裝，變成:

__webpack_require__.i:用于返回一個正確的上下文的函數(shù)回去，針對的是export直接為一個可運行方法的時候

以上就是webpack manifest中的大部分重要的函數(shù)，其實主要就是通過webpackJsonpCallback來注冊載入對應(yīng)的chunk文件，通過__webpack_require__來處理模塊的關(guān)系。

整個webpack 的在運行時都是通過 manifest去做控制處理的， webpackJsonpCallback對應(yīng)的是對加載的chunk文件的處理，__webpack_require__是對加載模塊的處理，了解這些可以使我們更好的去優(yōu)化我們的代碼，幫助我們?nèi)フ{(diào)試代碼，幫助我們在復(fù)雜情況下去解決問題提供一些其他的思路。

最后附上代碼：先介紹下,webpack-base是我在使用webpack的過程中自己總結(jié)的一套腳手架，文檔還沒有完善，如果需要文檔可以在issue里面提，本次的項目在分支上面開發(fā)，代碼點擊這里