前期准备

新建一个项目work目录,进入目录中，运行命令初始化项目和安装webpack

npm init -y

npm install webpack webpack-cli --save-dev

在work目录下创建webpack配置文件

文件名： webpack.config.js

文件内容:

module.exports = {
  // 设置webpack模式为none 表示最基础的工作模式
  mode: "none",
};

person.js文件内容：

class Person {
  constructor(name) {
    this.name = name
  }
}
export default Person

index.js文件内容：

import Person from "./js/person.js";

console.log("index.js");
const zbp = new Person("zbp");

使用webpack进行打包，运行命令 npx webpack
打包后的内容默认生成在dist目录中

打包结果分析

webpack默认打包入口是当前工作目录下 src/index.js

在index.js中导入了person.js

1. 整个main.js文件内容是一个立即执行函数；

2. 函数内部首先定义了一个数组，数组中的元素是从入口文件index.js中开始导入的其他模块文件；

这些模块文件的内容被包裹在一个匿名函数中，匿名函数参数为分别是__unused_webpack_module, __webpack_exports__, __webpack_require__这也就是为什么我们可以在各个js文件中访问module, exports, require变量和函数

var __webpack_modules__ = [
,
// person.js 文件中的内容
(__unused_webpack_module, __webpack_exports__, __webpack_require__)=> {
        class Person {
          constructor(name) {
            this.name = name
          }
        }
 }
]

3. 然后定义了一个模块缓存对象

var __webpack_module_cache__ = {};

4. 定义了一个模块请求函数

function __webpack_require__(moduleId){}

该函数的执行逻辑为：根据moduleId获取__webpack_module_cache__中的缓存，如果缓存存在，则直接返回缓存结果，如果不存在，创建模块缓存对象并调用执行相对应的模块函数，最后返回模块的exports对象；

5. 定义了一些工具函数，如：

__webpack_require__.d = ()=> {}
__webpack_require__.o = () => {}
__webpack_require__.r = () => {}

6. 最后是一个立即执行函数，也是整个打包文件的执行入口代码(即index.js 中的代码经过转换后放置在这里执行)

(() => {
// 对传入的对象设置一个 __esModule 属性
__webpack_require__.r(__webpack_exports__);

// ****导入模块，这里就是导入了项目中的 person.js
 var _js_person__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);

console.log("index.js");
// 使用export default 语句导出的成员 会转换成一个导出对象中的default属性成员
const zbp = new _js_person__WEBPACK_IMPORTED_MODULE_0__["default"]("zbp");

})();

7. main.js 中的文件内容

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ([
/* 0 */,
/* 1 */
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
class Person {
  constructor(name) {
    this.name = name
  }
}

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Person);

/***/ })
/******/ 	]);
/************************************************************************/
/******/ 	// 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.
(() => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _js_person__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);


console.log("index.js");
const zbp = new _js_person__WEBPACK_IMPORTED_MODULE_0__["default"]("zbp");

})();

/******/ })()
;

学习webpack-打包后的main.js文件分析