webpack打包结果原理解读

运行 yarn webpack --mode none

打包结果

生成了一个立即执行函数IIFE，工作入口

/******/ (function(modules) { // webpackBootstrap --工作入库
/******/ 	// The module cache
/******/ 	var installedModules = {}; // 缓存模块
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {// 第一次moduleId为0
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/    // modules是立即执行函数传进来的函数数组参数
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/  }
/******/
/******/ 	// Load entry module and return exports 
/******/  // 开始调用__webpack_require__函数，初始化调用参数数组的第一个元素，这里才开始加载模块
/******/ 	return __webpack_require__(__webpack_require__.s = 0);          
/******/ })
/************************************************************************/
/******/ ([
  /***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/***/ }),
/******/ ]);

立即执行函数是入口，参数是数组，数组中每一个函数
第一执行 webpack_require(0) // moduleId为0

/******/ 	// Load entry module and return exports 
/******/  // 开始调用__webpack_require__函数，初始化调用参数数组的第一个元素，这里才开始加载模块
/******/ 	return __webpack_require__(__webpack_require__.s = 0);       

webpack_require 函数实现

/******/ 	function __webpack_require__(moduleId) { // 第一次moduleId为0
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId, // 数组下标为模块id
/******/ 			l: false, // 表示该模块是否已加载
/******/ 			exports: {} // 导出模块
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}

加载模块

/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

执行模块里面的函数，使用严格模式，调用__webpack_require__.r函数

/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);

// 这里调用__webpack_require__，参数是1，该模块用来加载依赖的第一个模块
/* harmony import */ var _head_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);


const head = Object(_head_js__WEBPACK_IMPORTED_MODULE_0__["default"])();

document.body.append(head);


/***/ }),

调用__webpack_require__.r函数，添加标识，用来标识是__esModule

/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};

接下该模块内部加载依赖的模块，它依赖第一个模块，（从这里可以看出，不能自己引用自己

/* harmony import */ var _head_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);

开始调用该模块

const head = Object(_head_js__WEBPACK_IMPORTED_MODULE_0__["default"])();