解析webpackv5.68.0编译后的main文件

webpack根据entry入口文件,生成一个main.js的主文件,此文件运用闭包立即调用的机制

main文件的四块逻辑

  1. 初始化全局的module内容,仅包含同步文件的代码
  2. 模块的缓存以及加载模块函数
  3. webpack各种运行时的函数方法
  4. 加载入口文件代码

关于更多的weboack运行时函数,可看webpack/lib/RuntimeGlobals.js文件

  1. // 闭包形式
  2. (() => {
  3.   // 第一个逻辑: 初始化全局的module内容,仅包含同步文件的代码
  4.   var webpack = ({
  5.     'xxx.js': ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  6.       // 文件内容...
  7.     }),
  8.     // ....等
  9.   });
  11.   /************************************************************************/
  12.   // 第二个逻辑: 模块的加载存储对象和存储函数
  13.   var __webpack_module_cache__ = {};
  14.   // 获取模块对象的函数
  15.   function __webpack_require__(moduleId) {};
  16.   __webpack_require__.m = __webpack_modules__;
  18.   /************************************************************************/
  19.   // 第三个逻辑: webpack各种运行时的函数方法,全都已闭包自执行的方式运行
  20.   /* webpack/runtime/define property getters */
  21.   (() => {
  22.     __webpack_require__.d = (exports, definition) => {}
  23.   })();
  24.   (() => {
  25.     __webpack_require__.r = (exports) => {}
  26.   })();
  27.   // ...等运行时函数
  29.   /************************************************************************/
  30.   // 第四个逻辑: 加载入口文件代码
  31.   var __webpack_exports__ = {};
  32.   (() => {
  33.     __webpack_require__.r(__webpack_exports__);
  34.     __webpack_require__.r(__webpack_exports__);
  35.     __webpack_require__.d(__webpack_exports__, {
  36.       "testField": () => (/* binding */ 'testField')}
  37.      );
  38.     __webpack_require__(/*! ./remote */ "xxx.js");
  39.   })();
  40. })();

script load function

  1. // js 文件的加载方法
  2. // __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
  3. // url: js路径
  4. // loadingEnded: js 文件加载失败时的回调方法
  5. // "chunk-" + chunkId: js + chunk合并的js路径名称
  6. // chunkId: 编译后的文件对应的chunkId名称
  8. /* webpack/runtime/load script */
  9. (() => {
  10.   var inProgress = {};
  11.   var dataWebpackPrefix = "webpack-app:";
  12.   __webpack_require__.l = (url, done, key, chunkId) => {
  13.     // 如果正在加载js文件,就等待
  14.     if(inProgress[url]) { inProgress[url].push(done); return; }
  15.       var script, needAttach;
  17.       if(key !== undefined) {
  18.         // 遍历查找,查看js文件是否已经加载完成
  19.         var scripts = document.getElementsByTagName("script");
  20.         for(var i = 0; i < scripts.length; i++) {
  21.           var s = scripts[i];
  22.           if(s.getAttribute("src") == url || s.getAttribute("data-webpack") == dataWebpackPrefix + key) { script = s; break; }
  23.         }
  24.       }
  26.       // 资源未加载的情况下,创建资源加载
  27.       if(!script) {
  28.         needAttach = true;
  29.         script = document.createElement('script');
  30.         script.charset = 'utf-8';
  31.         script.timeout = 120;
  32.         if (__webpack_require__.nc) {
  33.           script.setAttribute("nonce", __webpack_require__.nc);
  34.         }
  35.         script.setAttribute("data-webpack", dataWebpackPrefix + key);
  36.         script.src = url;
  37.       }
  38.       inProgress[url] = [done];
  39.       // script资源完成的情况
  40.       var onScriptComplete = (prev, event) => {
  41.         script.onerror = script.onload = null;
  42.         clearTimeout(timeout);
  43.         var doneFns = inProgress[url];
  44.         delete inProgress[url];
  45.         script.parentNode && script.parentNode.removeChild(script);
  46.         doneFns && doneFns.forEach((fn) => (fn(event)));
  47.         if(prev) return prev(event);
  48.       }
  49.       // script资源加载超时
  50.        var timeout = setTimeout(
  51.          onScriptComplete.bind(
  52.            null,
  53.            undefined,
  54.            { type: 'timeout', target: script }),
  55.          120000
  56.        );
  57.       // script资源的事件监听
  58.        script.onerror = onScriptComplete.bind(null, script.onerror);
  59.        script.onload = onScriptComplete.bind(null, script.onload);
  60.        needAttach && document.head.appendChild(script);
  61.    };
  62. })();