/* webpack/runtime/get javascript chunk filename *///指向打包后的异步chunk的文件名,用于之后请求异步文件路径拼接(()=>{// This function allow to reference async chunks
__webpack_require__.u=(chunkId)=>{// return url for filenames based on template// chunkId:src_a_jsreturn""+ chunkId +".bundle.js";};})();
(()=>{// define __esModule on exports// 标识是esm导入
__webpack_require__.r=(exports)=>{if(typeof Symbol !=="undefined"&& Symbol.toStringTag){
Object.defineProperty(exports, Symbol.toStringTag,{value:"Module",});}
Object.defineProperty(exports,"__esModule",{value:true});};})();
导入文件通用方法
webpack_require
// The require functionfunction__webpack_require__(moduleId){// Check if module is in cache// 首先从缓存中,根据moduleId获取("./src/index.js"、./src/index.js)var cachedModule = __webpack_module_cache__[moduleId];if(cachedModule !==undefined){return cachedModule.exports;}// Create a new module (and put it into the cache)// 缓存中没有则创建,exports对象会在调用moduleId对应的方法内部进行赋值var module =(__webpack_module_cache__[moduleId]={// no module.id needed// no module.loaded neededexports:{},});// Execute the module function// 调用moduleId对应的方法引入文件内容
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);// Return the exports of the modulereturn module.exports;}
异步文件引入
获取下载文件的公共地址__webpack_require__.p
通过获取已有script标签的src属性,来获取下载地址
/* webpack/runtime/publicPath */// 获取入口文件js脚本的公共路径,本例为' http://127.0.0.1:5500/dist/'(()=>{var scriptUrl;// importScripts用于在一个js里面包含其他的js文件。相当于C里面的#include。if(__webpack_require__.g.importScripts){
scriptUrl = __webpack_require__.g.location +"";}var document = __webpack_require__.g.document;// 本案例会进入该分支if(!scriptUrl && document){if(document.currentScript) scriptUrl = document.currentScript.src;//'http://127.0.0.1:5500/dist/bundle.js'if(!scriptUrl){var scripts = document.getElementsByTagName("script");if(scripts.length){
scriptUrl = scripts[scripts.length -1].src;}}}// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.if(!scriptUrl)thrownewError("Automatic publicPath is not supported in this browser");
scriptUrl = scriptUrl
.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/");//替换后结果为: http://127.0.0.1:5500/dist/
__webpack_require__.p = scriptUrl;})();
/* webpack/runtime/ensure chunk */(()=>{//保存具体导入方法的对象,本案例保存__webpack_require__.f.j方法
__webpack_require__.f ={};// This file contains only the entry chunk.// The chunk loading function for additional chunks// chunkId:src_a_js
__webpack_require__.e=(chunkId)=>{let res = Promise.all(
Object.keys(__webpack_require__.f).reduce((promises, key)=>{//这里实际上调用了:__webpack_require__.f.j(chunkId, promises)// promises是一个数组,用来保存每个下载的chunk的下载状态,具体chunk状态查看__webpack_require__.f.j
__webpack_require__.f[key](chunkId, promises);return promises;},[]));return res;};})();
/* webpack/runtime/jsonp chunk loading */// 异步文件的引入,__webpack_require__.e实际调用的是__webpack_require__.f.j,__webpack_require__.f.j实际调用的是__webpack_require__.l(()=>{// no baseURI// object to store loaded and loading chunks// undefined = chunk not loaded, null = chunk preloaded/prefetched// [resolve, reject, Promise] = chunk loading, 0 = chunk loadedvar installedChunks ={main:0,};
__webpack_require__.f.j=(chunkId, promises)=>{// ...};// no prefetching// no preloaded// no HMR// no HMR manifest// no on chunks loaded// install a JSONP callback for chunk loadingvarwebpackJsonpCallback=(parentChunkLoadingFunction, data)=>{//data就是异步文件打包后的内容,及src_a_js.boundle.js//chunkIds: ['src_a_js']//moreModules:{'./src/a.js':加载异步文件内容的函数}var[chunkIds, moreModules, runtime]= data;// add "moreModules" to the modules object,// then flag all "chunkIds" as loaded and fire callbackvar moduleId,
chunkId,
i =0;// 查找所有之前还未下载完成的模块,在该方法执行时,表明对应的异步模块已下载完毕if(chunkIds.some((id)=> installedChunks[id]!==0)){for(moduleId in moreModules){if(__webpack_require__.o(moreModules, moduleId)){// 将已下载的打包后的异步文件的加载函数存入__webpack_require__.m,即__webpack_modules__
__webpack_require__.m[moduleId]= moreModules[moduleId];}}if(runtime)var result =runtime(__webpack_require__);}//parentChunkLoadingFunction即chunkLoadingGlobal.push方法自身if(parentChunkLoadingFunction)parentChunkLoadingFunction(data);// 处理异步chunk加载成功for(; i < chunkIds.length; i++){
chunkId = chunkIds[i];if(
__webpack_require__.o(installedChunks, chunkId)&&
installedChunks[chunkId]){
installedChunks[chunkId][0]();//将之前异步文件的promise状态变成resolved}
installedChunks[chunkId]=0;// 将异步文件对应的状态变成0,表示文件已下载完毕}};// 本案例中:self是window,self["webpackChunkwebpack5_demo"]存储的是异步chunck及其内容,本案例对应src_a_js.bundle.js内容var chunkLoadingGlobal =(self["webpackChunkwebpack5_demo"]=
self["webpackChunkwebpack5_demo"]||[]);//本行其实没看出有什么作用。。,没有这行也不影响结果
chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0));//这里是黑魔法监听文件下载完毕//修改chunkLoadingGlobal数组的push方法,变成webpackJsonpCallback//当异步文件下载完成执行时,会调用chunkLoadingGlobal.push方法,从而执行webpackJsonpCallback,改变文件状态//从而将__webpack_require__.e中的Promise.all返回的promise状态改变,进而通过__webpack_require__方法引入下载成功后保存到__webpack_modules__上的方法//最终实现异步模块的导入
chunkLoadingGlobal.push =webpackJsonpCallback.bind(null,//这里还有个小魔法,先通过chunkLoadingGlobal.push.bind(chunkLoadingGlobal)返回原本的push方法//方法里调用push其实还是操作chunkLoadingGlobal本身,不受改变后的push影响//即既改变了push方法,又保留了原对象的操作方法
chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
console.log("www3123", chunkLoadingGlobal);})();
"use strict";/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/(self["webpackChunkwebpack5_demo"]= self["webpackChunkwebpack5_demo"]||[]).push([["src_a_js"],{/***/"./src/a.js":/*!******************!*\
!*** ./src/a.js ***!
\******************//***/((__unused_webpack_module, __webpack_exports__, __webpack_require__)=>{eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\"async a\");\n\n\n//# sourceURL=webpack://webpack5_demo/./src/a.js?");/***/})}]);