在
Webpack构建好的js文件中，我们可以看到其实现的简版模块加载方式，__webpack_require__是我们很容易猜到功能，约等于import能力，可以加载某模块。 我们的各种模块化加载语法最后都会变成__webpack_require__来加载。
__webpack_require__函数
// The require function
function __webpack_require__(moduleId) {
// 检测是否存在缓存
if(installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 不存在则生成新的模块
var module = installedModules[moduleId] = {
i: moduleId,
l: false, // 是否加载
exports: {}
};
// call的方式加载模块 this转交，参数转交，对应其打包构建好的每个模块的参数结构。
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 表示已加载
module.l = true;
// 返回模块的exports
return module.exports;
}
__webpack_require__各属性
以下是__webpack_require__各属性以及对应能力，会经常出现在加载模块的语法中，可以帮助我们加深对__webpack_require__的理解。
// 入口模块的ID
__webpack_require__.s = the module id of the entry point
//模块缓存对象 {} id:{ exports /id/loaded}
__webpack_require__.c = the module cache
// 所有构建生成的模块 []
__webpack_require__.m = the module functions
// 公共路径，为所有资源指定一个基础路径
__webpack_require__.p = the bundle public path
//
__webpack_require__.i = the identity function used for harmony imports
// 异步模块加载函数，如果没有再缓存模块中 则用jsonscriptsrc 加载
__webpack_require__.e = the chunk ensure function
// 设定getter 辅助函数而已
__webpack_require__.d = the exported property define getter function
// 辅助函数而已 Object.prototype.hasOwnProperty.call
__webpack_require__.o = Object.prototype.hasOwnProperty.call
// 给exports设定attr __esModule
__webpack_require__.r = define compatibility on export
// 用于取值，伪造namespace
__webpack_require__.t = create a fake namespace object
// 用于兼容性取值（esmodule 取default， 非esmodule 直接返回module)
__webpack_require__.n = compatibility get default export
// hash
__webpack_require__.h = the webpack hash
//
__webpack_require__.w = an object containing all installed WebAssembly.Instance export objects keyed by module id
// 异步加载失败处理函数 辅助函数而已
__webpack_require__.oe = the uncaught error handler for the webpack runtime
// 表明脚本需要安全加载 CSP策略
__webpack_require__.nc = the script nonce
以上只是完成了基本的__webpack_require__认识。后续还要结合runtime的其它源码一起解读Webpack。
