webpack bundle中parentJsonpFunction的作用

parentJsonpFunction作用：使异步加载的模块在多个不同的bundle内同步。

 

假设有多入口文件

 

 

bundle1.js:

 

 

bundl2.js:

 

 

在webpack打包后

 

 

 

加载流程:

 

1.bundle1: webpack_require__.e.. ---> 生成【script】

2.bundle2: webpack_require__.e.. ---> 生成【script】

3.进入到0.js内部了，现在在执行bundle1生成的script标签，此时执行的是window.webpackJsonp.push(执行的是bundle2的webpackjsonpcallback方法..) 将模块加载到bundle2中

4.通过parentJsonpFunction进入到了bundle1中，将这个模块也加载到bundle1中，再通过parentJsonpFunction将data挂载到了window.webpackJsonp数组下

5.调用bundle1的webpack_require__.e的.then了

 (resolve(webpack_require__(./show.js).bind(…)).then.. webpackrequire的时候可以加载到这个已经加载到modules里面的module了

6.调用bundle2的.then了 (resolve(webpack_require__(./show.js).bind(…)).then.. webpack

webpackrequire的时候可以加载到这个已经加载到modules里面的module了，（因为刚才的过程中已经加载了，所以这里可以直接加载）

7.执行bundle1的.then 执行bundle2的.then 输出bundle1最终的内容 输出bundle2最终的内容

8.进入到0.js内部了，这是因为创建的第二个script标签加载了

  执行window.webpackJsonp.push… (这个是bundle2的webpackjsonpcallback) 重新加载了bundle2的module，然后执行到parentJsonpFunction，重新加载了一下bundle1的module，再执行到parentJsonpFunction 最终在window的webpackjsonp数组里又push入一条内容 （注意：这里第二个script标签运行，重新给bundle2和bundle1的modules进行了加载)

 

 

 

 

转载于:https://www.cnblogs.com/eret9616/p/11431755.html