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進行了加載)