美文网首页
Webpack 产物解析

Webpack 产物解析

作者: thunderQin | 来源:发表于2021-09-01 17:14 被阅读0次

    simple demo

    // add.js
    const add = (a, b) => {
      return a + b;
    };
    
    export default add;
    
    
    // index.js
    import add from "./add";
    
    console.log("sum", add(1, 3));
    

    output

    (() => {
     // 运用的模块列表,当成一个map存起来,一是缓存,而是把执行结果给export
      var __webpack_modules__ = {
        "./src/add.js": (
          __unused_webpack_module, //模块信心,id,isload,export
          __webpack_exports__, //把执行结果复制给exports这个变量
          __webpack_require__ // 模块里面可以继续引用其他模块
        ) => {
            // 1. 把这个标示为es模块 {esmodule: true}
          __webpack_require__.r(__webpack_exports__);
           // 2: define 给这个export负值 export = {default: add, esmodule: true}
          __webpack_require__.d(__webpack_exports__, {
            default: () => __WEBPACK_DEFAULT_EXPORT__,
          });
          const add = (a, b) => {
            console.log("kkkk");
            return a + b;
          };
    
          const __WEBPACK_DEFAULT_EXPORT__ = add;
        },
      };
      
    // 一个模块只需要执行一次就可以得到export,所以做个缓存
      var __webpack_module_cache__ = {};
    
      // 核心功能
      function __webpack_require__(moduleId) {
        // Check if module is in cache
        var cachedModule = __webpack_module_cache__[moduleId];
        if (cachedModule !== undefined) {
          return cachedModule.exports;
        }
        // Create a new module (and put it into the cache)
        var module = (__webpack_module_cache__[moduleId] = {
          // no module.id needed
          // no module.loaded needed
          exports: {},
        });
    
       
        // 执行模块,得到exports
        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    
        // Return the exports of the module
        return module.exports;
      }
    
      /* webpack/runtime/define property getters */
      (() => {
        // define getter functions for harmony exports
        __webpack_require__.d = (exports, definition) => {
          for (var key in definition) {
            if (
              __webpack_require__.o(definition, key) &&
              !__webpack_require__.o(exports, key)
            ) {
              Object.defineProperty(exports, key, {
                enumerable: true,
                get: definition[key],
              });
            }
          }
        };
      })();
    
      /* webpack/runtime/hasOwnProperty shorthand */
      (() => {
        __webpack_require__.o = (obj, prop) =>
          Object.prototype.hasOwnProperty.call(obj, prop);
      })();
    
      /* webpack/runtime/make namespace object */
      (() => {
        // define __esModule on exports
        __webpack_require__.r = (exports) => {
          if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
            Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
          }
          Object.defineProperty(exports, "__esModule", { value: true });
        };
      })();
    
      var __webpack_exports__ = {};
      // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
      (() => {
        __webpack_require__.r(__webpack_exports__);
        var _add__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/add.js");
    
        console.log("sum", (0, _add__WEBPACK_IMPORTED_MODULE_0__.default)(1, 3));
      })();
    })();
    
    

    相关文章

      网友评论

          本文标题:Webpack 产物解析

          本文链接:https://www.haomeiwen.com/subject/oizxwltx.html