This article also output from pull hook education courses, feel for the webpack this packaging results explain the first word transparent, so most of the notes in this article is the teacher knocked source, and then in some places add their own understanding
(function (modules) {
// 14 Define the webpackJsonpCallback implementation, which merges the module definition and changes the Promise state to perform subsequent behavior
// Merge module definitions to mount lazy modules to modules
?? // Change the Promise state by iterating through data.chunkIds, and then putting the first installedChunks (resolve) value as an array object into the converge?? Then set installedChunks[chunkId] to 0
function webpackJsonpCallback(data) {
// 01 Return the id of the module to be dynamic
var chunkIds = data[0];
// 02 Gets the module dependency object that needs to be dynamically loaded
var moreModules = data[1];
// add "moreModules" to the modules object,
// then flag all "chunkIds" as loaded and fire callback
var moduleId, chunkId, i = 0, resolves = [];
// Loop to determine whether the corresponding module content in chunkIds has been loaded
for (; i < chunkIds.length; i++) {
chunkId = chunkIds[i];
if (Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
resolves.push(installedChunks[chunkId][0]);
}
// Update the current chunk state
installedChunks[chunkId] = 0;
}
for (moduleId in moreModules) {
if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
// Merge modulesmodules[moduleId] = moreModules[moduleId]; }}// Execute all resolve
while(resolves.length) { resolves.shift()(); }};// Define jsonpScriptSrc to implement SRC processing
function jsonpScriptSrc(chunkId) {
return __webpack_require__.p + "" + chunkId + ".built.js"
}
// 01 defines objects for caching loaded modules in the future
let installedModules = {}
// 15 Define installedChunks to indicate whether the chunk corresponding to a chunkId has been loaded
// 0 successfully loaded
// Promise is loading
// undefined is not loaded
let installedChunks = {
main: 0
}
// 02 define a __webpack_require__ method to replace the import require loading operation. The core job is to return the output of the loading module
function __webpack_require__(moduleId) {
// 2-1 Check whether the current cache contains the contents of the module to be loaded, if so, return directly
if (installedModules[moduleId]) {
return installedModules[moduleId].exports
}
// 2-2 If the current cache does not exist, we need to define {} to perform the imported module content load
let module = installedModules[moduleId] = {
i: moduleId,
l: false.exports: {}}// 2-3 Call the function corresponding to the current moduleId and finish loading the content, i.e. execute the source code we wrote
modules[moduleId].call(module.exports, module.module.exports, __webpack_require__)
// 2-4 After the above method call is complete, we can change the value of l to indicate that the current module content has been loaded
module.l = true
// 2-5 After the load is complete, the retrieved content is returned to the location of the call
return module.exports
}
// 16 Implement jSONP to load content. Use Promise to implement asynchronous load operations
// Jsonp dynamically generates a script tag whose SRC points to ${chunkId}.built-in
// Promise is a Promise. All (Promises), so that the main application will be executed after the module is loaded (i.e. the execution of webpackJsonpCallback)
__webpack_require__.e = function requireEnsure(chunkId) {
// 01 Defines an array to hold promise objects
var promises = [];
// 02 Obtains the chunk corresponding to chunkId
var installedChunkData = installedChunks[chunkId];
// 03 Perform subsequent logic depending on whether the current installedChunkData is loaded or not
if(installedChunkData ! = =0) { // 0 means "already installed".
// .
if (installedChunkData) {
promises.push(installedChunkData[2]);
} else {
// setup Promise in chunk cache
var promise = new Promise(function (resolve, reject) {
installedChunkData = installedChunks[chunkId] = [resolve, reject];
});
promises.push(installedChunkData[2] = promise);
// Create a label to start loading chunk
var script = document.createElement('script');
/ / set the SRC
script.src = jsonpScriptSrc(chunkId);
document.head.appendChild(script); }}/ / promise
return Promise.all(promises);
};
// 03 Define the m attribute to store modules
__webpack_require__.m = modules
// 04 Define the c attribute to store the cache
__webpack_require__.c = installedModules
// 05 Defines the o method to determine whether the specified attribute exists on an object
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty(object, property)
}
// 06 defines the d method to add the specified property to an object and provide a getter for that property
__webpack_require__.d = function (exports, name, getter) {
if(! __webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, { enumerable: true.get: getter })
}
}
// 07 Defines the r method to indicate that the current module is of es6 type
__webpack_require__.r = function (exports) {
if (typeof Symbol! = ='undefined' && Symbol.toStringTag) {
Object.defineProperty(exports.Symbol.toStringTag, { value: "Module"})}Object.defineProperty(exports.'__esModule', { value: true})}// 08 defines the n method to set the concrete getter -- to set an object that returns the default value of module
__webpack_require__.n = function (module) {
let getter = module && module.__esModule ?
function getDefault() { return module['default']} :function getModuleExports() { return module }
__webpack_require__.d(getter, 'a', getter)
return getter
}
// 11 Defines the t method to load the module content of the specified value, process the content and return it
__webpack_require__.t = function (value, mode) {
// 01 Load module contents corresponding to value (value is usually a module ID)
// The loaded content is reassigned to the value variable
if (mode & 1) { // The binary value of mode is 1
value = __webpack_require__(value)
}
if (mode & 8) { // Load the content that can be returned to use directly
return value //commonJs
}
if ((mode & 4) && typeof value === 'object' && value && value.__esModule) {
return value // esModule and default is the object
}
// If 8 and 4 are not true, you need to define ns to return the content via the default attribute
let ns = Object.create(null)
__webpack_require__.r(ns)
Object.defineProperty(ns, 'default', { enumerable: true.value: value })
if (mode & 2 && typeofvalue ! = ='string') {
for (var key in value) {
__webpack_require__.d(ns, key, function (key) {
return value[key]
}.bind(null, key))
}
}
return ns
}
// 09 Defines the P attribute, which is used to save the resource access path
__webpack_require__.p = ""
// 11 Use a variable to store an array
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] | | [];// 12 Save the native push direction
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
// 13 Override the native push direction
jsonpArray.push = webpackJsonpCallback;
jsonpArray = jsonpArray.slice();
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
var parentJsonpFunction = oldJsonpFunction;
// 10 Invoke the __webpack_require__ method to import and load modules
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 _login_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/ *! ./login.js */ "./src/login.js");
console.log('index.js executed ')
console.log(_login_js__WEBPACK_IMPORTED_MODULE_0__["default"].'< -- -- -- -- -- -')
console.log(_login_js__WEBPACK_IMPORTED_MODULE_0__["age"].'< -- -- -- -- -- -')}),"./src/login.js":
(function (module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, "age".function () { return age; });
__webpack_exports__["default"] = ('Zce is a handsome man');
const age = 40})})Copy the code