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?"); /***/ }) }); ~~~