在
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。