《Webpack实战 入门、进阶与调优（第2版）》- 第一章 webpack简介之打包代码分析

2024-06-22 15:14:18 浏览数 (1)

注意 ⚠️

  • 本节解析的dist文件夹下的main.js文件，按照上节中package.json的配置生成。完整代码地址
  • 前置知识点 IIFE 逗号运算符
前提

为了展示模块引用关系，新增b.js，并且在a.js中使用。代码如下

a.js

代码语言：javascript复制
import { bcd } from './test/b.js'

export default function () {
  console.log('print b')
  bcd()
}

b.js

代码语言：javascript复制
export default function addContentTest() {
  let a = 'bb'
  document.write(a)
}

export function bcd() {
  console.log('bcd')
}
源码展示

dist/main.js中注释看到很清晰；下面咱们会解析

代码语言：javascript复制
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./a.js":
/*!**************!*
  !*** ./a.js ***!
  **************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _test_b_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./test/b.js */ "./test/b.js");


/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__() {
  console.log('print b')
  ;(0,_test_b_js__WEBPACK_IMPORTED_MODULE_0__.bcd)()
}


/***/ }),

/***/ "./test/b.js":
/*!*******************!*
  !*** ./test/b.js ***!
  *******************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   bcd: () => (/* binding */ bcd),
/* harmony export */   "default": () => (/* binding */ addContentTest)
/* harmony export */ });

function addContentTest() {
  let a = 'bb'
  document.write(a)
}

function bcd() {
  console.log('bcd')
}

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// 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;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* 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.
(() => {
/*!******************!*
  !*** ./index.js ***!
  ******************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _a_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a.js */ "./a.js");


(0,_a_js__WEBPACK_IMPORTED_MODULE_0__["default"])()
})();

/******/ })()
;
代码解析（直接写在注释上）
代码语言：javascript复制
// *注：IIFE
(() => { // webpackBootstrap
  "use strict";
  /**
   * __webpack_modules__ 文件模块对象
   * key: 文件路径
   * value: 生成该模块需要调用function
   */
  var __webpack_modules__ = ({
    // 模块a.js
    "./a.js": ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

      __webpack_require__.r(__webpack_exports__);

      __webpack_require__.d(__webpack_exports__, {
        "default": () => ( /* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
      });

      var _test_b_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./test/b.js */ "./test/b.js");

      function __WEBPACK_DEFAULT_EXPORT__() {
        console.log('print b');
        (0, _test_b_js__WEBPACK_IMPORTED_MODULE_0__.bcd)()
      }
    }),

    // 模块b.js
    "./test/b.js": ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

      __webpack_require__.r(__webpack_exports__);

      __webpack_require__.d(__webpack_exports__, {
        bcd: () => ( /* binding */ bcd),
        "default": () => ( /* binding */ addContentTest)
      });

      function addContentTest() {
        let a = 'bb'
        document.write(a)
      }

      function bcd() {
        console.log('bcd')
      }

    })

  });

  // webpack固定代码-start
  // 模块缓存
  var __webpack_module_cache__ = {};
  // require方法，可以理解为CommonJs的require. e.g: const a = require('a.js)
  function __webpack_require__(moduleId) {
    // 1.有缓存，取缓存
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }
    // 2.没有缓存，新建一个module
    var module = __webpack_module_cache__[moduleId] = {
      exports: {}
    };
    // 3.产生key对应的模块
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    // 4.返回
    return module.exports;
  }

  /**
   * __webpack_require__自身的方法-start
   * 1. __webpack_require__.d => exports对象 定义新属性
   * 2. __webpack_require__.o => hasOwnProperty
   * 3. __webpack_require__.r => 把 exports对象 定义为一个Module（具体原因我也不知道，求留言评论）
   */
  (() => {
    __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_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
  })();

  (() => {
    __webpack_require__.r = (exports) => {
      if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
        Object.defineProperty(exports, Symbol.toStringTag, {
          value: 'Module'
        });
      }
      Object.defineProperty(exports, '__esModule', {
        value: true
      });
    };
  })();
  // __webpack_require__自身的方法-start
  // webpack固定代码-end

  var __webpack_exports__ = {};
  // entry 入口文件的执行
  (() => {
    __webpack_require__.r(__webpack_exports__);
    var _a_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./a.js */ "./a.js");
    (0, _a_js__WEBPACK_IMPORTED_MODULE_0__["default"])()
  })();

})();

(本节完 The End)

缓存 require 入门 打包 webpack

0 人点赞