Webpack探索【15】--- 基础构建原理详解（模块如何被组建&如何加载）&源码解读

本文主要说明Webpack模块构建和加载的原理，对构建后的源码进行分析。

 一 说明

本文以一个简单的示例，通过对构建好的bundle.js源码进行分析，说明Webpack的基础构建原理。

本文使用的Webpack版本是4.32.2版本。

注意：之前也分析过Webpack3.10.0版本构建出来的bundle.js，通过和这次的Webpack 4.32.2版本对比，核心的构建原理基本一致，只是将模块索引id改为文件路径和名字、模块代码改为了eval(moduleString)执行的方式等一些优化改造。

二 示例

1）Webpack.config.js文件内容：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development' // 'production' 用于配置开发还是发布模式
};

2）创建src文件夹，添加入口文件index.js:

import moduleLog from './module.js';

document.write('index.js loaded.');

moduleLog();

3）在src目录下创建module.js文件：

export default function () {
    document.write('module.js loaded.');
}

4）package.json文件内容：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "webpack": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  },
  "dependencies": {
    "lodash": "^4.17.4"
  }
}

三 执行构建

执行构建命令：npm run webpack

在dist目录下生成的bundle.js源码如下（下边代码是将注释去掉、压缩的代码还原后的代码）：

(function (modules) {
    // 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, {enumerable: true, get: getter});
        }
    };

    // define __esModule on exports
    __webpack_require__.r = function (exports) {
        if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
            Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'});
        }
        Object.defineProperty(exports, '__esModule', {value: true});
    };

    // create a fake namespace object
    // mode & 1: value is a module id, require it
    // mode & 2: merge all properties of value into the ns
    // mode & 4: return value when already ns object
    // mode & 8|1: behave like require
    __webpack_require__.t = function (value, mode) {
        if (mode & 1) value = __webpack_require__(value);
        if (mode & 8) return value;
        if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
        var ns = Object.create(null);
        __webpack_require__.r(ns);
        Object.defineProperty(ns, 'default', {enumerable: true, value: value});
        if (mode & 2 && typeof value != 'string') for (var key in value) __webpack_require__.d(ns, key, function (key) {
            return value[key];
        }.bind(null, key));
        return ns;
    };

    // 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 = "./src/index.js");
})
/************************************************************************/
({
    "./src/index.js": (function (module, __webpack_exports__, __webpack_require__) {
        "use strict";

        __webpack_require__.r(__webpack_exports__);
        var _module_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/module.js");
        document.write('index.js loaded.');
        Object(_module_js__WEBPACK_IMPORTED_MODULE_0__["default"])();
    }),

    "./src/module.js": (function (module, __webpack_exports__, __webpack_require__) {
        "use strict";

        __webpack_require__.r(__webpack_exports__);
        __webpack_exports__["default"] = (function () {
            document.write('module.js loaded.');
        });
    })
});

四 源码解读

bundle.js整个代码实际就是一个自执行函数，当在html中加载该文件时，就是执行该自执行函数。

大概结构如下：

(function (modules) {
    // The module cache
    var installedModules = {};
    // The require function
    function __webpack_require__(moduleId) {...}
    
    // 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) {...};

    // define __esModule on exports
    __webpack_require__.r = function (exports) {...};

    // create a fake namespace object
    // mode & 1: value is a module id, require it
    // mode & 2: merge all properties of value into the ns
    // mode & 4: return value when already ns object
    // mode & 8|1: behave like require
    __webpack_require__.t = function (value, mode) {...};

    // getDefaultExport function for compatibility with non-harmony modules
    __webpack_require__.n = function (module) {...};
    
    // Object.prototype.hasOwnProperty.call
    __webpack_require__.o = function (object, property) {...};
    
    // __webpack_public_path__
    __webpack_require__.p = "";
    
    // Load entry module and return exports
    return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
({
    "./src/index.js": (function (module, __webpack_exports__, __webpack_require__) {...}),
    "./src/module.js": (function (module, __webpack_exports__, __webpack_require__) {...})
});

4.1 自执行函数的参数解读

该参数是一个对象，对象属性的key就是入口模块和它引用的所有模块文件的路径和名字组合。整个代码有多少文件被引入，就会有多少个属性对应。属性key对应的值是一个函数。该函数的内容具体是什么，后边会单独分析。

4.2 自执行函数体解读

自执行函数主要做了下边几件事：

1）定义了installedModules缓存模块的对象变量

该变量用于存储被加载过的模块相关信息。该对象的属性结构如下：

installedModules = {
    "./src/index.js": {
        i: moduleId,
        l:false,
        exports: {...}
    }
}

installedModules对象的属性key就是模块的id，跟参数对象的key一样。

属性对象中有三个属性：

i：模块id，目前看和key是一样的。

l：标识该模块是否已经加载过。目前感觉这个变量没啥用，只有加载过的模块才会存到该变量中吧？可能还有其它用途，有待发现。

exports：加载完模块后的，模块导出的值都放在这个变量中。

2）定义了__webpack_require__函数，以及该函数上的各种属性

该函数是Webpack的最核心的函数，类似于RequireJS的require方法。用于文件模块的加载和执行。

详细内容会在下边专门讲到。

3）通过__webpack_require__函数加载入口模块

传入的参数是模块id，"./src/index.js"是入口模块的id标识。在这里正是启动了入口模块的加载。

4.3 __webpack_require__函数源码解读

该函数的源码如下：

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;
    }

该函数主要做了如下几件事：

1）判断该模块是否已经加载过了：如果已经加载过了，从installedModules缓存中找到该模块信息，并将之前加载该模块时保存的exports信息返回。

2）如果该模块没有被加载过：创建一个模块对象，用于保存该模块的信息，并将该模块存储到installedModules缓存变量中，该模块对象的属性详细见前边说明。

3）加载该模块的代码。modules是整个bundle.js文件中自执行函数的参数，详细见上边说明。注意：执行该模块的代码函数时，传入三个参数：模块信息对象、模块导出内容存储对象、__webpack_require__函数。将该函数传入的原因是：加载的当前模块，可能会依赖其它模块，需要__webpack_require__继续加载其它模块。

4）将该模块标识为已加载过的。

5）返回模块的导出值。

4.4 __webpack_require__函数的属性源码解读

该函数上定义了很多属性，各个属性的作用如下（英文是源码的原始注解，这里没有删除）：

// expose the modules object (__webpack_modules__)
// 保存整个所有模块的原始信息，modules是整个bundle.js文件中自执行函数的参数，详细见上边说明。
__webpack_require__.m = modules;

// expose the module cache
// 保存所有已加载模块的信息，具体见上边说明
__webpack_require__.c = installedModules;

// define getter function for harmony exports
// 工具函数：给对应的exports对象上创建name属性
__webpack_require__.d = function (exports, name, getter) {
    if (!__webpack_require__.o(exports, name)) {
        Object.defineProperty(exports, name, {enumerable: true, get: getter});
    }
};

// define __esModule on exports
// 给缓存中加载过的模块导出对象中，添加__esModule属性。
19 // TODO：具体这个属性的其它用途，待研究
__webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
        Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'});
    }
    Object.defineProperty(exports, '__esModule', {value: true});
};

// create a fake namespace object
// mode & 1: value is a module id, require it
// mode & 2: merge all properties of value into the ns
// mode & 4: return value when already ns object
// mode & 8|1: behave like require
// TODO: 待研究该函数作用，后续研究完补充
__webpack_require__.t = function (value, mode) {
    if (mode & 1) value = __webpack_require__(value);
    if (mode & 8) return value;
    if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
    var ns = Object.create(null);
    __webpack_require__.r(ns);
    Object.defineProperty(ns, 'default', {enumerable: true, value: value});
    if (mode & 2 && typeof value != 'string')
        for (var key in value) __webpack_require__.d(ns, key, function (key) {
            return value[key];
        }.bind(null, key));
    return ns;
};

// 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 = "";

通过上边的属性可以看出，通过__webpack_require__函数，可以获取到所有信息。

 4.5 入口文件./src/index.js源码解读

上边分析自执行函数中，最主要的一行代码就是通过__webpack_require__函数加载了入口文件。

__webpack_require__(__webpack_require__.s = "./src/index.js")

./src/index.js源码如下：

"./src/index.js": (function (module, __webpack_exports__, __webpack_require__) {
        "use strict";

        __webpack_require__.r(__webpack_exports__);
        var _module_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/module.js");
        document.write('index.js loaded.');
        Object(_module_js__WEBPACK_IMPORTED_MODULE_0__["default"])();
})

主要做了如下几件事：

1）调用__webpack_require__.r方法，具体参考上边说明。

2）通过__webpack_require__调用依赖的模块"./src/module.js"，并将该模块的exports存入_module_js__WEBPACK_IMPORTED_MODULE_0__ 变量。

3）执行index.js自身代码。

可以看出，相比index.js源码，添加和修改了一些代码，源码中通过ES6的import导入模块方式改为了__webpack_require__方法。

4.6 引用模块./src/module.js源码解读

在上边入口模块index.js中，通过__webpack_require__加载了module.js模块。

该模块源码如下：

"./src/module.js": (function (module, __webpack_exports__, __webpack_require__) {
        "use strict";

        __webpack_require__.r(__webpack_exports__);
        __webpack_exports__["default"] = (function () {
            document.write('module.js loaded.');
        });
})

主要做了如下几件事：

1）调用__webpack_require__.r方法，具体参考上边说明。

2）将导出值存入缓存该模块信息对象的exports属性对象中。

到此，bundle.js的所有源码已解读完毕。

五 基础构建&加载原理说明

从上边源码解读中，可以看出，整个构建过程如下：

1.将所有文件和内容存入自执行函数的参数对象；

2.通过__webpack_require__方法加载入口文件；

3.将加载了的文件信息缓存；

4.如果当前加载的文件依赖其它文件，就通过__webpack_require__继续加载其它文件；

5.直到入口文件执行完毕。

下边是一个简单的原理图，画的比较简陋：