webpack打包后文件分析

(() => { // 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、最后每个文件都是一个模块，每个模块都是一个自执行函数。