webpack打包后文件分析

Posted 2022-05-24 前端精髓

(() =>  // webpackBootstrap
  var __webpack_modules__ = (

    "./src/title.js":
      /*!**********************!*\\
        !*** ./src/title.js ***!
        \\**********************/
      ((module) => 

        module.exports = 'title'

      )

  );
  /************************************************************************/
  // The module cache
  var __webpack_module_cache__ = ;

  // The require function
  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: 
    ;

    // Execute the module function
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

    // Return the exports of the module
    return module.exports;
  

  /************************************************************************/
  var __webpack_exports__ = ;
  // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
  (() => 
    /*!**********************!*\\
      !*** ./src/index.js ***!
      \\**********************/
    let title = __webpack_require__(/*! ./title */ "./src/title.js")
    console.log(title)
  )();

)()
  ;

经过删减之后

(() => 
  
  var __webpack_modules__ = (
    "./src/title.js":
      ((module) => 
        module.exports = 'title'
      )
  );
  var __webpack_module_cache__ = ;
  function __webpack_require__(moduleId) 
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) 
      return cachedModule.exports;
    
    var module = __webpack_module_cache__[moduleId] = 
      exports: 
    ;
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    return module.exports;
  
  var __webpack_exports__ = ;
  (() => 
    let title = __webpack_require__(/*! ./title */ "./src/title.js")
    console.log(title)
  )();
)()
  ;

1、一开始就是一个自执行函数
2、__webpack_modules__ 是模块定义
3、__webpack_module_cache__ 是模块缓存
4、__webpack_require__ webpack 自己实现 require 方法，浏览器是默认不支持 commonJS，所以需要自己实现一个函数。
5、最后每个文件都是一个模块，每个模块都是一个自执行函数。