入口之webpackJsonpCallback

最新推荐文章于 2023-02-09 11:30:55 发布

原创最新推荐文章于 2023-02-09 11:30:55 发布 · 7.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #php #ViewUI

webpack 专栏收录该内容

18 篇文章

订阅专栏

本文探讨了webpack在处理chunk时的入口函数webpackJsonpCallback的工作原理，它主要负责确保chunk依赖的正确执行顺序，保存模块定义，并在合适的时机执行模块代码。详细解释了为什么在chunk加载时需要进行判断并手动执行，以保证代码逻辑的正确运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个chunk的入口函数，基本上做了三件事，比如针对app.js

webpackJsonpCallback([0,1], {
  2: function(){}, 
  3:function(){}
}, [2]);

1.chunk1有可能依赖chunk0，要先执行chunk0，也有可能chunk0已经执行过了，所以需要判断

2.将module = 2/3 的定义保存在modules对象中

3.执行module = 2的模块的代码，注入三个参数

对于第一点说明：

在通过require.ensure加载的时候，的确有可能0正在加载中，并且chunk0下边挂在了很多callback，需要在chunk0 resolve的时候去执行，此后才能执行chunk1的代码逻辑，所以添加判断，并且手动执行时必要的

我也没见过场景。。。

/******/ 	var parentJsonpFunction = window["webpackJsonp"];
/******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
/******/ 		// add "moreModules" to the modules object,
/******/ 		// then flag all "chunkIds" as loaded and fire callback
/******/ 		var moduleId, chunkId, i = 0, resolves = [], result;
/******/ 		for(;i < chunkIds.length; i++) {
/******/ 			chunkId = chunkIds[i];
/******/ 			if(installedChunks[chunkId])
/******/ // 此处installedChunkds[chunkId] = [resolve, reject, promise]，
         // 在__webpack_require__.e函数定义的
/******/ 				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(chunkIds, moreModules, executeModules);
/******/ 		while(resolves.length)
/******/ 			resolves.shift()();
/******/ 		if(executeModules) {
/******/ 			for(i=0; i < executeModules.length; i++) {
/******/ 				result = __webpack_require__(__webpack_require__.s = executeModules[i]);
/******/ 			}
/******/ 		}
/******/ 		return result;
/******/ 	};