浅谈 Webpack 背后的运行机制

IIFE 传入的 modules 对象里多了一个键值对，对应着新模块 src/utils/math.js，这和我们在源代码中拆分的模块互相呼应。然而，有了 modules 只是第一步，这份文件最终达到的效果应该是让各个模块按开发者编排的顺序运行。

探究 webpackBootstrap

接下来看看 webpackBootstrap 函数中有些什么：

// webpackBootstrap 
(function(modules){ 
// 缓存 __webpack_require__ 函数加载过的模块 
var installedModules = {}; 
/** 
* Webpack 加载函数，用来加载 webpack 定义的模块 
* @param {String} moduleId 模块 ID，一般为模块的源码路径，如 "./src/index.js" 
* @returns {Object} exports 导出对象 
*/ 
function __webpack_require__(moduleId) { 
// ... 
} 
// 在 __webpack_require__ 函数对象上挂载一些变量及函数 ... 
// 传入表达式的值为 "./src/index.js" 
return __webpack_require__(__webpack_require__.s = "./src/index.js"); 
})(/* modules */); 

可以看到其实主要做了两件事：

1. 定义一个模块加载函数 __webpack_require__。
2. 使用加载函数加载入口模块 "./src/index.js"。

整个 webpackBootstrap 中只出现了入口模块的影子，那其他模块又是如何加载的呢?我们顺着 __webpack_require__("./src/index.js") 细看加载函数的内部逻辑：

function __webpack_require__(moduleId) { 
// 重复加载则利用缓存 
if (installedModules[moduleId]) { 
return installedModules[moduleId].exports; 
} 
// 如果是第一次加载，则初始化模块对象，并缓存 
var module = installedModules[moduleId] = { 
i: moduleId, // 模块 ID 
l: false, // 模块加载标识 
exports: {} // 模块导出对象 
}; 
/** 
* 执行模块 
* @param module.exports -- 模块导出对象引用，改变模块包裹函数内部的 this 指向 
* @param module -- 当前模块对象引用 
* @param module.exports -- 模块导出对象引用 
* @param __webpack_require__ -- 用于在模块中加载其他模块 
*/ 
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
// 模块加载标识置为已加载 
module.l = true; 
// 返回当前模块的导出对象引用 
return module.exports; 
} 

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!