深入理解webpack打包机制(4)

发布时间：2020-12-24 09:09 所属栏目：34 来源：网络整理

导读：

导读：那么manifest如何做初始化工作呢？ (function(modules) { parentJsonpFunction = window[] = moduleId,chunkId,i = ,resolves =(;i /spanspan style="color: #008000"gt;///spanspan style="color: #008000"gt; The

那么manifest如何做初始化工作呢？

(function(modules) { parentJsonpFunction = window[] = moduleId,chunkId,i = ,resolves =(;i < chunkIds.length; i++== (moduleId =(i=; i < executeModules.length; i++= __webpack_require__(__webpack_require__.s =

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; The module cache</span>
 <span style="color: #0000ff"&gt;var</span> installedModules =<span style="color: #000000"&gt; {};

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; objects to store loaded and loading chunks</span>
 <span style="color: #0000ff"&gt;var</span> installedChunks =<span style="color: #000000"&gt; {
     </span><span style="color: #800080"&gt;4</span>: <span style="color: #800080"&gt;0</span><span style="color: #000000"&gt;
 };

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; The require function模块加载函数</span>

<span style="color: #000000"> function __webpack_require__(moduleId) {

     </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Check if module is in cache</span>
     <span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt;(installedModules[moduleId]) {
         </span><span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; installedModules[moduleId].exports;
     }
     </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Create a new module (and put it into the cache)</span>
     <span style="color: #0000ff"&gt;var</span> module = installedModules[moduleId] =<span style="color: #000000"&gt; {
         i: moduleId,exports: {}
     };

     </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Execute the module function</span>

<span style="color: #000000"> modules[moduleId].call(module.exports,__webpack_require__);

     </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Flag the module as loaded</span>
     module.l = <span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;;

     </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Return the exports of the module</span>
    <span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; module.exports;
 }

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; This file contains only the entry chunk.
 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; The chunk loading function for additional chunks</span>
 __webpack_require__.e =<span style="color: #000000"&gt; function requireEnsure(chunkId) {
     </span><span style="color: #0000ff"&gt;var</span> installedChunkData =<span style="color: #000000"&gt; installedChunks[chunkId];
     </span><span style="color: #0000ff"&gt;if</span>(installedChunkData === <span style="color: #800080"&gt;0</span><span style="color: #000000"&gt;) {
         </span><span style="color: #0000ff"&gt;return</span> <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Promise(function(resolve) { resolve(); });
     }

    </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; a Promise means "currently loading".</span>
    <span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt;(installedChunkData) {
         </span><span style="color: #0000ff"&gt;return</span> installedChunkData[<span style="color: #800080"&gt;2</span><span style="color: #000000"&gt;];
     }

     </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; setup Promise in chunk cache</span>
     <span style="color: #0000ff"&gt;var</span> promise = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Promise(function(resolve,reject) {
         installedChunkData </span>= installedChunks[chunkId] =<span style="color: #000000"&gt; [resolve,reject];
     });
     installedChunkData[</span><span style="color: #800080"&gt;2</span>] =<span style="color: #000000"&gt; promise;

     </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; start chunk loading</span>
     <span style="color: #0000ff"&gt;var</span> head = document.getElementsByTagName(<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;head</span><span style="color: #800000"&gt;'</span>)[<span style="color: #800080"&gt;0</span><span style="color: #000000"&gt;];
     </span><span style="color: #0000ff"&gt;var</span> script = document.createElement(<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;script</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;);
     script.type </span>= <span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;text/javascript</span><span style="color: #800000"&gt;"</span><span style="color: #000000"&gt;;
    script.charset </span>= <span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;utf-8</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;;
     script.</span><span style="color: #0000ff"&gt;async</span> = <span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;;
     script.timeout </span>= <span style="color: #800080"&gt;120000</span><span style="color: #000000"&gt;;

     </span><span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt; (__webpack_require__.nc) {
         script.setAttribute(</span><span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;nonce</span><span style="color: #800000"&gt;"</span><span style="color: #000000"&gt;,__webpack_require__.nc);
    }
     script.src </span>= __webpack_require__.p + <span style="color: #800000"&gt;""</span> + chunkId + <span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;.</span><span style="color: #800000"&gt;"</span> + {<span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;0</span><span style="color: #800000"&gt;"</span>:<span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;ae9c5f5f</span><span style="color: #800000"&gt;"</span>}[chunkId] + <span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;.js</span><span style="color: #800000"&gt;"</span><span style="color: #000000"&gt;;
     </span><span style="color: #0000ff"&gt;var</span> timeout = setTimeout(onScriptComplete,<span style="color: #800080"&gt;120000</span><span style="color: #000000"&gt;);
     script.onerror </span>= script.onload =<span style="color: #000000"&gt; onScriptComplete;
     function onScriptComplete() {
         </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; avoid mem leaks in IE.</span>
         script.onerror = script.onload = <span style="color: #0000ff"&gt;null</span><span style="color: #000000"&gt;;
         clearTimeout(timeout);
         </span><span style="color: #0000ff"&gt;var</span> chunk =<span style="color: #000000"&gt; installedChunks[chunkId];
         </span><span style="color: #0000ff"&gt;if</span>(chunk !== <span style="color: #800080"&gt;0</span><span style="color: #000000"&gt;) {
             </span><span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt;(chunk) {
                 chunk[</span><span style="color: #800080"&gt;1</span>](<span style="color: #0000ff"&gt;new</span> Error(<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;Loading chunk </span><span style="color: #800000"&gt;'</span> + chunkId + <span style="color: #800000"&gt;'</span><span style="color: #800000"&gt; failed.</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;));
             }
             installedChunks[chunkId] </span>=<span style="color: #000000"&gt; undefined;
         }
     };
     head.appendChild(script);

     </span><span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; promise;
 };

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; expose the modules object (__webpack_modules__)</span>
 __webpack_require__.m =<span style="color: #000000"&gt; modules;

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; expose the module cache</span>
 __webpack_require__.c =<span style="color: #000000"&gt; installedModules;

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; define getter function for harmony exports</span>
 __webpack_require__.d =<span style="color: #000000"&gt; function(exports,</span><span style="color: #0000ff"&gt;get</span><span style="color: #000000"&gt;: getter
         });
    }
 };

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; getDefaultExport function for compatibility with non-harmony modules</span>
 __webpack_require__.n =<span style="color: #000000"&gt; function(module) {
     </span><span style="color: #0000ff"&gt;var</span> getter = module &amp;&amp; module.__esModule ?<span style="color: #000000"&gt;
         function getDefault() { </span><span style="color: #0000ff"&gt;return</span> module[<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;default</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;]; } :
         function getModuleExports() { </span><span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; module; };
     __webpack_require__.d(getter,getter);
     </span><span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; getter;
 };

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Object.prototype.hasOwnProperty.call</span>
 __webpack_require__.o = function(<span style="color: #0000ff"&gt;object</span>,property); };

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; __webpack_public_path__</span>
 __webpack_require__.p = <span style="color: #800000"&gt;""</span><span style="color: #000000"&gt;;

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; on error function for async loading</span>
__webpack_require__.oe = function(err) { console.error(err); <span style="color: #0000ff"&gt;throw</span><span style="color: #000000"&gt; err; };

})([]);

与单文件内容一致，定义了一个自执行函数，因为它不包含任何模块，所以传入一个空数组。除了定义了__webpack_require__，还另外定义了两个函数用来进行加载模块。

（编辑：ASP站长网）