摘要：函數(shù)首先會(huì)檢查是否緩存了已加載的模塊，如果有則直接返回緩存模塊的。調(diào)用完成后，模塊標(biāo)記為已加載。返回模塊的內(nèi)容。細(xì)心的你一定會(huì)發(fā)現(xiàn)，文章到這里只介紹了對(duì)的實(shí)現(xiàn)，那么是如何實(shí)現(xiàn)的呢歡迎閱讀本系列第二篇模塊化原理。

我們都知道，webpack作為一個(gè)構(gòu)建工具，解決了前端代碼缺少模塊化能力的問題。我們寫的代碼，經(jīng)過webpack構(gòu)建和包裝之后，能夠在瀏覽器以模塊化的方式運(yùn)行。這些能力，都是因?yàn)閣ebpack對(duì)我們的代碼進(jìn)行了一層包裝，本文就以webpack生成的代碼入手，分析webpack是如何實(shí)現(xiàn)模塊化的。

PS: webpack的模塊不僅指js，包括css、圖片等資源都可以以模塊看待，但本文只關(guān)注js。

首先我們創(chuàng)建一個(gè)簡單入口模塊index.js和一個(gè)依賴模塊bar.js：

//index.js
"use strict";
var bar = require("./bar");
function foo() {
    return bar.bar();
}

//bar.js
"use strict";
exports.bar = function () {
    return 1;
}

webpack配置如下：

var path = require("path");
module.exports = {
    entry: path.join(__dirname, "index.js"),
    output: {
        path: path.join(__dirname, "outs"),
        filename: "index.js"
    },
};

這是一個(gè)最簡單的配置，只指定了模塊入口和輸出路徑，但已經(jīng)滿足了我們的要求。

在根目錄下執(zhí)行webpack，得到經(jīng)過webpack打包的代碼如下（去掉了不必要的注釋）：

(function(modules) { // webpackBootstrap
    // The module cache
    var installedModules = {};
    // The require function
    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);
})
/************************************************************************/
([
/* 0 */
(function(module, exports, __webpack_require__) {

"use strict";

var bar = __webpack_require__(1);
bar.bar();

}),
/* 1 */
(function(module, exports, __webpack_require__) {

"use strict";

exports.bar = function () {
    return 1;
}

})
]);

上面webpack打包的代碼，整體可以簡化成下面的結(jié)構(gòu)：

(function (modules) {/* 省略函數(shù)內(nèi)容 */})
([
function (module, exports, __webpack_require__) {
    /* 模塊index.js的代碼 */
},
function (module, exports, __webpack_require__) {
    /* 模塊bar.js的代碼 */
}
]);

可以看到，整個(gè)打包生成的代碼是一個(gè)IIFE(立即執(zhí)行函數(shù))，函數(shù)內(nèi)容我們待會(huì)看，我們先來分析函數(shù)的參數(shù)。

函數(shù)參數(shù)是我們寫的各個(gè)模塊組成的數(shù)組，只不過我們的代碼，被webpack包裝在了一個(gè)函數(shù)的內(nèi)部，也就是說我們的模塊，在這里就是一個(gè)函數(shù)。為什么要這樣做，是因?yàn)闉g覽器本身不支持模塊化，那么webpack就用函數(shù)作用域來hack模塊化的效果。

如果你debug過node代碼，你會(huì)發(fā)現(xiàn)一樣的hack方式，node中的模塊也是函數(shù)，跟模塊相關(guān)的參數(shù)exports、require，或者其他參數(shù)__filename和__dirname等都是通過函數(shù)傳值作為模塊中的變量，模塊與外部模塊的訪問就是通過這些參數(shù)進(jìn)行的，當(dāng)然這對(duì)開發(fā)者來說是透明的。

同樣的方式，webpack也控制了模塊的module、exports和require，那么我們就看看webpack是如何實(shí)現(xiàn)這些功能的。

下面是摘取的函數(shù)內(nèi)容，并添加了一些注釋：

// 1、模塊緩存對(duì)象
var installedModules = {};
// 2、webpack實(shí)現(xiàn)的require
function __webpack_require__(moduleId) {
    // 3、判斷是否已緩存模塊
    if(installedModules[moduleId]) {
        return installedModules[moduleId].exports;
    }
    // 4、緩存模塊
    var module = installedModules[moduleId] = {
        i: moduleId,
        l: false,
        exports: {}
    };
    // 5、調(diào)用模塊函數(shù)
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    // 6、標(biāo)記模塊為已加載
    module.l = true;
    // 7、返回module.exports
    return module.exports;
}
// 8、require第一個(gè)模塊
return __webpack_require__(__webpack_require__.s = 0);

模塊數(shù)組作為參數(shù)傳入IIFE函數(shù)后，IIFE做了一些初始化工作：

IIFE首先定義了installedModules ，這個(gè)變量被用來緩存已加載的模塊。

定義了__webpack_require__ 這個(gè)函數(shù)，函數(shù)參數(shù)為模塊的id。這個(gè)函數(shù)用來實(shí)現(xiàn)模塊的require。

__webpack_require__ 函數(shù)首先會(huì)檢查是否緩存了已加載的模塊，如果有則直接返回緩存模塊的exports。

如果沒有緩存，也就是第一次加載，則首先初始化模塊，并將模塊進(jìn)行緩存。

然后調(diào)用模塊函數(shù)，也就是前面webpack對(duì)我們的模塊的包裝函數(shù)，將module、module.exports和__webpack_require__作為參數(shù)傳入。注意這里做了一個(gè)動(dòng)態(tài)綁定，將模塊函數(shù)的調(diào)用對(duì)象綁定為module.exports，這是為了保證在模塊中的this指向當(dāng)前模塊。

調(diào)用完成后，模塊標(biāo)記為已加載。

返回模塊exports的內(nèi)容。

利用前面定義的__webpack_require__ 函數(shù)，require第0個(gè)模塊，也就是入口模塊。

require入口模塊時(shí)，入口模塊會(huì)收到收到三個(gè)參數(shù)，下面是入口模塊代碼：

function(module, exports, __webpack_require__) {
    "use strict";
    var bar = __webpack_require__(1);
    bar.bar();
}

webpack傳入的第一個(gè)參數(shù)module是當(dāng)前緩存的模塊，包含當(dāng)前模塊的信息和exports；第二個(gè)參數(shù)exports是module.exports的引用，這也符合commonjs的規(guī)范；第三個(gè)__webpack_require__ 則是require的實(shí)現(xiàn)。

在我們的模塊中，就可以對(duì)外使用module.exports或exports進(jìn)行導(dǎo)出，使用__webpack_require__導(dǎo)入需要的模塊，代碼跟commonjs完全一樣。

這樣，就完成了對(duì)第一個(gè)模塊的require，然后第一個(gè)模塊會(huì)根據(jù)自己對(duì)其他模塊的require，依次加載其他模塊，最終形成一個(gè)依賴網(wǎng)狀結(jié)構(gòu)。webpack管理著這些模塊的緩存，如果一個(gè)模塊被require多次，那么只會(huì)有一次加載過程，而返回的是緩存的內(nèi)容，這也是commonjs的規(guī)范。

到這里，webpack就hack了commonjs代碼。

原理還是很簡單的，其實(shí)就是實(shí)現(xiàn)exports和require，然后自動(dòng)加載入口模塊，控制緩存模塊，that"s all。

細(xì)心的你一定會(huì)發(fā)現(xiàn)，文章到這里只介紹了webpack對(duì)commonjs的實(shí)現(xiàn)，那么ES6 module是如何實(shí)現(xiàn)的呢？
歡迎閱讀本系列第二篇《webpack模塊化原理-ES6 module》。