Webpack打包后代码 · 前端笔记

# 无import ~~~ // webpackBootstrap 启动函数 // modules 即存放所有模块的数组，数组中的每个元素都是一个函数 (function(modules) { // webpackBootstrap // 安装过的模块都存放在这里面 // 作用是将己经加载过的模块缓存在内存中，提升性能 var installedModules = {}; // 去数组中加载一个模块， module Id 为要加载模块在数组中的index // 作用和Node.js中的require 语句相似 function __webpack_require__(moduleId) { // 如果需要加载的模块己经被加载过，就直接从缓存中返回 if(installedModules[moduleId]) { return installedModules[moduleId].exports; } // 如果缓存中不存在需要加载的模块，就新建一个模块，并将它存在缓存中 var module = installedModules[moduleId] = { i: moduleId, // 模块在数组中的index l: false, // 该模块是否己经加载完毕 exports: {} // 该模块的导出值 }; // 从 modules 中获取 index 为 module Id 的模块对应的函数 // 再调用这个函数，同时将函数需要的参数传入 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); // 将这个模块标记为己加载 module.l = true; // 返回这个模块的导出值 return module.exports; } // expose the modules object (__webpack_modules__) __webpack_require__.m = modules; // expose the module cache __webpack_require__.c = installedModules; // define getter function for harmony exports __webpack_require__.d = function(exports, name, getter) { if(!__webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { enumerable: true, get: getter }); } }; // define __esModule on exports __webpack_require__.r = function(exports) { if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); } Object.defineProperty(exports, '__esModule', { value: true }); }; // create a fake namespace object // mode & 1: value is a module id, require it // mode & 2: merge all properties of value into the ns // mode & 4: return value when already ns object // mode & 8|1: behave like require __webpack_require__.t = function(value, mode) { if(mode & 1) value = __webpack_require__(value); if(mode & 8) return value; if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; var ns = Object.create(null); __webpack_require__.r(ns); Object.defineProperty(ns, 'default', { enumerable: true, value: value }); if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); return ns; }; // getDefaultExport function for compatibility with non-harmony modules __webpack_require__.n = function(module) { var getter = module && module.__esModule ? function getDefault() { return module['default']; } : function getModuleExports() { return module; }; __webpack_require__.d(getter, 'a', getter); return getter; }; // Object.prototype.hasOwnProperty.call __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; // Webpack 配置中的 publicPath ，用于加载被分割出去的异步代码 __webpack_require__.p = ""; // 使用 __webpack_require__ 去加载 index 为 0 的模块，并且返回该模块导出的内容 // index 为 0 的模块就是 main.js 对应的文件，也就是执行入口模块 // __webpack_require__.s 的含义是启动模块对应的 index return __webpack_require__(__webpack_require__.s = "./advance/webpack/src/index.js"); }) /************************************************************************/ // 所有的模块都存放在一个数组里，根据每个模块在数组的 index 来区分和定位模块 ({ /***/ "./advance/webpack/src/index.js": /*!**************************************!*\ !*** ./advance/webpack/src/index.js ***! \**************************************/ /*! no static exports found */ /***/ (function(module, exports) { eval("console.log(1);\n\n//# sourceURL=webpack:///./advance/webpack/src/index.js?"); /***/ }) }); ~~~ <br> <br> # 有import ~~~ (function (modules) { // webpackBootstrap // install a JSONP callback for chunk loading /** * webpackJsonp 用于从异步加载的文件中安装模块。 * 将 webpackJsonp 挂载到全局是为了方便在其他文件中调用。 * * @param chunkids 异步加载的文件中存放的需要安装的模块对应的Chunk ID * @param moreModules 异步加载的文件中存放的需要安装的模块列表 * @param executeModules 在异步加载的文件中存放的需要安装的模块都安装成功后，需要执行的模块对应的index */ function webpackJsonpCallback(data) { var chunkIds = data[0]; var moreModules = data[1]; // 将 moreModules 添加到modules 对象中 // 将所有 chunkids 对应的模块都标记成己经加载成功 var moduleId, chunkId, i = 0, resolves = []; for (; i < chunkIds.length; i++) { chunkId = chunkIds[i]; if (installedChunks[chunkId]) { resolves.push(installedChunks[chunkId][0]); } installedChunks[chunkId] = 0; } for (moduleId in moreModules) { if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { modules[moduleId] = moreModules[moduleId]; } } if (parentJsonpFunction) parentJsonpFunction(data); while (resolves.length) { resolves.shift()(); } }; // 缓存己经安装的模块 var installedModules = {}; // 存储已加载和加载中的对象 // 键为 Chunk 的ID ，值为0 代表己经加载成功 // undefined = chunk not loaded, null = chunk preloaded/prefetched // Promise = chunk loading, 0 = chunk loaded var installedChunks = { "main": 0 }; // script path function function jsonpScriptSrc(chunkId) { return __webpack_require__.p + "" + ({}[chunkId] || chunkId) + ".js" } // 去数组中加载一个模块， module Id 为要加载模块在数组中的index // 作用和Node.js中的require 语句相似 function __webpack_require__(moduleId) { // 如果需要加载的模块己经被加载过，就直接从缓存中返回 if (installedModules[moduleId]) { return installedModules[moduleId].exports; } // 如果缓存中不存在需要加载的模块，就新建一个模块，并将它存在缓存中 var module = installedModules[moduleId] = { i: moduleId, l: false, exports: {} }; // 从 modules 中获取 index 为 module Id 的模块对应的函数 // 再调用这个函数，同时将函数需要的参数传入 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); // 返回这个模块的导出值 module.l = true; // Return the exports of the module return module.exports; } /** * 用于加载被分割出去的需要异步加载的Chunk 对应的文件 * @param chunkid 需要异步加载的Chunk 对应的ID * @returns {Promise} */ __webpack_require__.e = function requireEnsure(chunkId) { var promises = []; // 从上面定义的installedChunks 中获取chunk id 对应的Chunk 的加载状态 var installedChunkData = installedChunks[chunkId]; if (installedChunkData !== 0) { // 0 means "already installed". // installedChunkData 不为空且不为 0 时，表示该Chunk 正在网络加裁中 if (installedChunkData) { // 返回存放在installedChunkData 数组中的Promise 对象 promises.push(installedChunkData[2]); } else { // installedChunkData 为空，表示该 Chunk 还没有加载过，去加载该Chunk 对应的文件 // setup Promise in chunk cache var promise = new Promise(function (resolve, reject) { installedChunkData = installedChunks[chunkId] = [resolve, reject]; }); promises.push(installedChunkData[2] = promise); // 通过DOM 操作，向HTML head 中插入一个 script 标签去异步加载Chunk 对应的 JavaScript 文件 var script = document.createElement('script'); var onScriptComplete; script.charset = 'utf-8'; script.timeout = 120; if (__webpack_require__.nc) { script.setAttribute("nonce", __webpack_require__.nc); } // 文件的路径由配置的publicPath 、chunkid 拼接而成 script.src = jsonpScriptSrc(chunkId); // 在 script 加载和执行完成时回调 onScriptComplete = function (event) { // 防止内存泄露 script.onerror = script.onload = null; clearTimeout(timeout); // 去检查chunkid 对应的Chunk 是否安装成功，安装成功时才会存在于installedChunks 中 var chunk = installedChunks[chunkId]; if (chunk !== 0) { if (chunk) { var errorType = event && (event.type === 'load' ? 'missing' : event.type); var realSrc = event && event.target && event.target.src; var error = new Error('Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'); error.type = errorType; error.request = realSrc; chunk[1](error); } installedChunks[chunkId] = undefined; } }; var timeout = setTimeout(function () { onScriptComplete({ type: 'timeout', target: script }); }, 120000); script.onerror = script.onload = onScriptComplete; document.head.appendChild(script); } } return Promise.all(promises); }; // expose the modules object (__webpack_modules__) __webpack_require__.m = modules; // expose the module cache __webpack_require__.c = installedModules; // define getter function for harmony exports __webpack_require__.d = function (exports, name, getter) { if (!__webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { enumerable: true, get: getter }); } }; // define __esModule on exports __webpack_require__.r = function (exports) { if (typeof Symbol !== 'undefined' && Symbol.toStringTag) { Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); } Object.defineProperty(exports, '__esModule', { value: true }); }; // create a fake namespace object // mode & 1: value is a module id, require it // mode & 2: merge all properties of value into the ns // mode & 4: return value when already ns object // mode & 8|1: behave like require __webpack_require__.t = function (value, mode) { if (mode & 1) value = __webpack_require__(value); if (mode & 8) return value; if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; var ns = Object.create(null); __webpack_require__.r(ns); Object.defineProperty(ns, 'default', { enumerable: true, value: value }); if (mode & 2 && typeof value != 'string') for (var key in value) __webpack_require__.d(ns, key, function (key) { return value[key]; }.bind(null, key)); return ns; }; // getDefaultExport function for compatibility with non-harmony modules __webpack_require__.n = function (module) { var getter = module && module.__esModule ? function getDefault() { return module['default']; } : function getModuleExports() { return module; }; __webpack_require__.d(getter, 'a', getter); return getter; }; // Object.prototype.hasOwnProperty.call __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; // __webpack_public_path__ __webpack_require__.p = ""; // on error function for async loading __webpack_require__.oe = function (err) { console.error(err); throw err; }; var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); jsonpArray.push = webpackJsonpCallback; jsonpArray = jsonpArray.slice(); for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); var parentJsonpFunction = oldJsonpFunction; // 使用 __webpack_require__ 去加载 index 为 0 的模块，并且返回该模块导出的内容 // index 为 0 的模块就是 main.js 对应的文件，也就是执行入口模块 // __webpack_require__.s 的含义是启动模块对应的 index return __webpack_require__(__webpack_require__.s = "./advance/webpack/src/index.js"); }) /************************************************************************/ // 存放所有没有经过异步加载的，随着执行入口文件加载的模块 ({ /***/ "./advance/webpack/src/index.js": /*!**************************************!*\ !*** ./advance/webpack/src/index.js ***! \**************************************/ /*! no static exports found */ /***/ (function (module, exports, __webpack_require__) { eval("__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./show */ \"./advance/webpack/src/show.js\")).then((show) => {\r\n // 执行show 函数\r\n show ('Webpack');\r\n})\n\n//# sourceURL=webpack:///./advance/webpack/src/index.js?"); /***/ }) }); ~~~