preface

Webpack packages import(chunkId) as __webpack_require__.e(chunkId). First __webpack_require__.e**** creates a promise, caches the promise’s resove function in the installedChunks object, and then creates a script tag to load the resource. After the resource is successfully loaded, webpackJsonpCallback is automatically called in the format of [[chunkId], {moduleId: () => {}}]. This function does two things: 1. Add the module function to modules by using the moduleId as the module key; 2. Call the resolve function saved in installedChunks, and __webpack_require__.e promise. The final module is returned via __webpack_require(moduleId).

const installedChunks = {}; {[chunkId]: resolve} function _webpack_reier. e(chunkId) {const promises = []; Const promise = new promise (function(resolve) {// installedChunks[chunkId] = resolve; }) addScript(); // create a script to load resources asynchronously. Return Promise. All (promises); } // The loaded JS resource is a function execution, which is defined by Webpack in the main file and mounted to the window webpackJsonpCallback([[chunId], {moduleId: (module, __webpack_exports__, __webpack_require__) => {__webpack_exports__["default"] = 'let's go to code ';}}]) // After the asynchronous resource is loaded successfully, execute function webpackJsonpCallback(data) { const [chunks, moreModules] = data; const resolves = []; for(let i = 0; i <chunks.length; I ++) {// Save the resolve function saved in installedChunks to the TRANS-port queue, waiting for const chunkId = chunks[I]; ?? Push (installedChunks[chunkId])} for(let moduleId in moreModules) {// Add functions from asynchronous resources to module to modules. Modules is a collection of webpack modules, which is an object // array, similar to [{[moduleId]: () => {}}]. modules[moduleId] = moreModules[moduleId]; SRC // SRC/webpack_require.e: at this point, promise. All becomes resolved state while(? }} import ('. / utils. Js'). Then (data = > {the console. The log (data)}); E (chunkId). Then (__webpack_require__.bind(null, ModuleId)).then(data => {console.log(data)}) // Promise.all in __webpack_require__. Modules are registered with modules objects, and webpack_require gets module functions on modules, executes module functions, and returns the module's module.exports object. At this point, the asynchronous module is loaded.Copy the code