webpack hositing

91 阅读1分钟

webpack 会将各个模块的代码封装成一个匿名函数,缓存模块,在使用时引入模块对象。

我们定义两个模块

// a.js
export function a() {
 return 'This is A function';
}
// index.js
import * as util from './a';
window.__a = util.a();

index.js 作为入口文件会定一个全局的立即执行的匿名函数,首先我们找到打包后对应的函数位置

image.png

可以看到它先去执行了__webpack_require__.r(webpack_exports); 这个函数主要是给导出的模块也就是里面定义的对象增加__esModule的标识 下面的一句则是通过__webapck_require_ 导入模块,这个函数是导入的核心

看下它做了什么事情

image.png

其实也比较简单定义了一个缓存对象__webpack_module_cache__ 判断通过每个模块的ID 获取是否引用过,是的话就直接返回,没有的话就定义一个module对象,包含一个exports的对象属性, module这个对象的赋值初始化在__webpack_modules 上(这个是所有模块的一个数组集合,模块ID就是数组的下标)

image.png

如图我们定义的a.js 模块id就是1,也就是数组的下标,它对应的也是一个函数 入参是我们上面定义的module 对象,和module.exports, 和require函数

主要是做了两件事

webpack_require.r, 给导出对象exports增加标识属性 webpack_require.d 给导出对象exports 定义我们需要导出的属性,比如a和b函数