webpack运行时代码简要分析

开个坑,主要也是怕自己后面忘了

简单写写,有空了补上

__webpack_modules是一个数组,每个元素都是一个函数,函数接受三个参数:第一个参数module好像没用到,第二个是一个对象(会把本模块要导出的属性,赋值给这个对象),第三个是__webpack_require方法(用于引入其他的模块)。函数体里面就是原本这个模块的代码,然后会通过__webpack_require.d方法(类似object.assign的作用),把模块的导出值上的属性,全挂到第二个入参上面。然后如果还要引入别的模块,就会调用第三个入参,传入目标模块的moduleId

__webpack_require方法,接收一个参数moduleId。首先检查这个moduleId是否在缓存数组里,如果有直接返回缓存内容。没有,就定义一个module对象,有一个exports属性,值是空对象,然后先把module缓存塞进缓存数组,再调用__webpack_modules[moduleId],如上文所说传入modulemodule.exports,__webpack_require。因为是浅拷贝,所以前面定义过的module.exports就能拿到引用的模块的导出值了。最后return module.exports


webpack运行时代码简要分析
https://miku03090831.github.io/2023/06/27/webpack运行时代码简要分析/
作者
qh_meng
发布于
2023年6月27日
许可协议