摘要：的編譯構建上一篇文章詳解中介紹了基于事件流編程，是個高度的插件集合，整體介紹了的編譯流程。本文將多帶帶聊一聊最核心的部分，編譯構建。的編譯重要的構建節點的構建中總會經歷如下幾個事件節點。

上一篇文章webpack詳解中介紹了webpack基于事件流編程，是個高度的插件集合，整體介紹了webpack 的編譯流程。本文將多帶帶聊一聊最核心的部分，編譯&構建。

webpack的構建中總會經歷如下幾個事件節點。

before-run 清除緩存

run 注冊緩存數據鉤子

compile 開始編譯

make 從入口分析依賴以及間接依賴模塊，創建模塊對象

build-module 模塊構建

seal 構建結果封裝， 不可再更改

after-compile 完成構建，緩存數據

emit 輸出到dist目錄

其中make是整個構建中最核心的部分編譯，通過模塊工廠函數創建模塊，然后對模塊進行編譯。

上圖中提到的*ModuleFactory是指模塊工廠函數，之所以會有模塊工廠這樣的函數，還要從webpack中entry的配置說起，在webpack的配置項中entry支持如下類型：

字符類型string

字符數組類型[string]

多頁面對象key-value類型object { : string | [string] }

也支持一個函數，返回構建的入口(function: () => string | [string] | object { : string | [string] })

為了處理以后不同類型的入口模塊，所以就需要個模塊工廠來處理不同的入口模塊類型。

singleEntry: string｜object { : string }

multiEntry： [string]|object { : [string] }

dynamicEntry： (function: () => string | [string] | object { : string | [string] })

上圖中為了簡單說明構建的流程，就以最直接的singleEntry類型說起，對于此類入口模塊，webpack均使用NormalModuleFactory來創建模塊,這個創建的模塊的類型叫NormalModule，在NormalModule中實現了模塊的構建方法build，使用runLoaders對模塊進行加載，然后利用進行解析，分析模塊依賴，遞歸構建。

到構建封裝階段時候，代碼構建已經完畢，但是如何將這些代碼按照依賴引用邏輯組織起來，當瀏覽器將你構建出來的代碼加載到瀏覽器的時候，仍然能夠正確執行。在webpack中通過Manifest記錄各個模塊的詳細要點，通過Runtime來引導，加載執行模塊代碼，特別是異步加載。

Runtime
如上所述，我們這里只簡略地介紹一下。runtime，以及伴隨的 manifest 數據，主要是指：在瀏覽器運行時，webpack 用來連接模塊化的應用程序的所有代碼。runtime 包含：在模塊交互時，連接模塊所需的加載和解析邏輯。包括瀏覽器中的已加載模塊的連接，以及懶加載模塊的執行邏輯。
Manifest
那么，一旦你的應用程序中，形如 index.html 文件、一些 bundle 和各種資源加載到瀏覽器中，會發生什么？你精心安排的 /src 目錄的文件結構現在已經不存在，所以 webpack 如何管理所有模塊之間的交互呢？這就是 manifest 數據用途的由來……
當編譯器(compiler)開始執行、解析和映射應用程序時，它會保留所有模塊的詳細要點。這個數據集合稱為 "Manifest"，當完成打包并發送到瀏覽器時，會在運行時通過 Manifest 來解析和加載模塊。無論你選擇哪種模塊語法，那些 import 或 require 語句現在都已經轉換為 webpack_require 方法，此方法指向模塊標識符(module identifier)。通過使用 manifest 中的數據，runtime 將能夠查詢模塊標識符，檢索出背后對應的模塊。

定義了一個立即執行函數，聲明了__webpack_require__,對各種模塊進行加載。

(function(modules) { // webpackBootstrap
    var installedModules = {}; // cache module
    function __webpack_require__(moduleId) { // 模塊加載
        // Check if module is in cache
        if (installedModules[moduleId]) {
            return installedModules[moduleId].exports;
        }
        // Create a new module (and put it into the cache)
        var module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}
        };
        // Execute the module function
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // Flag the module as loaded
        module.l = true;
        // Return the exports of the module
        return module.exports;
    }

    // expose the modules object (__webpack_modules__)
    __webpack_require__.m = modules;

    // expose the module cache
    __webpack_require__.c = installedModules;

    // define getter function for harmony exports
    __webpack_require__.d = function(exports, name, getter) {
        if (!__webpack_require__.o(exports, name)) {
            Object.defineProperty(exports, name, {
                configurable: false,
                enumerable: true,
                get: getter
            });
        }
    };

    // getDefaultExport function for compatibility with non-harmony modules
    __webpack_require__.n = function(module) {
        var getter = module && module.__esModule ?
            function getDefault() { return module["default"]; } :
            function getModuleExports() { return module; };
        __webpack_require__.d(getter, "a", getter);
        return getter;
    };

    // Object.prototype.hasOwnProperty.call
    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

    // __webpack_public_path__
    __webpack_require__.p = "";

    // Load entry module and return exports
    return __webpack_require__(__webpack_require__.s = 0);
})([/**modules*/])

上面提到的代碼片段便是webpack構建后在瀏覽器中執行的引導代碼。也就是上面提到的runtime。它是個立即執行函數，那么入參modules便是上面的Manifest,組織各個模塊的依賴邏輯。

(function(modules){
    // ...
    // runtime
    function __webpack_require__(moduleId) {
        // 加載邏輯
    }
    // ...
})([function (module, exports, __webpack_require__) {

    var chunk1 = __webpack_require__(1);
    var chunk2 = __webpack_require__(2);
   
}, function (module, exports, __webpack_require__) {

    __webpack_require__(2);
    var chunk1 = 1;
    exports.chunk1 = chunk1;
}, function (module, exports) {

    var chunk2 = 1;
    exports.chunk2 = chunk2;
}])

上面說到了runtime和manifest就是在seal階段注入的

class Compilation extends Tapable {
   
    seal(callback) {
        this.hooks.seal.call();
        // ...
        if (this.hooks.shouldGenerateChunkAssets.call() !== false) {
            this.hooks.beforeChunkAssets.call();
            this.createChunkAssets();
        }
        // ...
    }
  
    createChunkAssets() {
        // ...
        for (let i = 0; i < this.chunks.length; i++) {
            const chunk = this.chunks[i];
            // ...
                const template = chunk.hasRuntime() 
                    ? this.mainTemplate
                    : this.chunkTemplate; // 根據是否有runTime選擇模塊,入口文件是true, 需要異步加載的文件則沒有
                const manifest = template.getRenderManifest({ 
                    // 生成manifest
                    chunk,
                    hash: this.hash,
                    fullHash: this.fullHash,
                    outputOptions,
                    moduleTemplates: this.moduleTemplates,
                    dependencyTemplates: this.dependencyTemplates
                }); // [{ render(), filenameTemplate, pathOptions, identifier, hash }]
                // ...
    }
}

通過template最后將代碼組織起來，上面看到的構建后的代碼就是mainTemplate生成的。

通過template生成最后代碼，構建已經完成，接下來就是將代碼輸出到dist 目錄。

騰訊IVWEB團隊的工程化解決方案feflow已經開源：Github主頁：https://github.com/feflow/feflow

如果對您的團隊或者項目有幫助，請給個Star支持一下哈～