Node平台下bundle.js文件浅析

在下方的项目中bundle.js由info.js，main.js，mathUtils.js构建出来，
目录结构：

info.js：

export const name = 'why';
export const age = 18;
export const height = 1.88;

main.js：

// 1.使用commonjs的模块化规范
const {add, mul} = require('./mathUtils.js')

console.log(add(20, 30));
console.log(mul(20, 30));

// 2.使用ES6的模块化的规范
import {name, age, height} from "./info";

console.log(name);
console.log(age);
console.log(height);

mathUtils.js：

function add(num1, num2) {
  return num1 + num2
}

function mul(num1, num2) {
  return num1 * num2
}

module.exports = {
  add,
  mul
}

bundle.js：

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/  // require函数
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// 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[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;
/******/ 	}
/******/
/******/
/******/  // ============================= 给Require的属性赋了很多参数  =============================
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports 加载函数入口
  __webpack_require__.s = 0
/******/ 	return __webpack_require__(__webpack_require__.s);
/******/ })
/************************************************************************/
// 下方是一个数组
/******/ ([
/* 0 */
// 这个是模块webpack加载的入口
//===================  第0个元素（main.js） ==================
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__info__ = __webpack_require__(2);
const {add, mul} = __webpack_require__(1)
console.log(add(20, 30));
console.log(mul(20, 30));
console.log(__WEBPACK_IMPORTED_MODULE_0__info__["c" /* name */]);
console.log(__WEBPACK_IMPORTED_MODULE_0__info__["a" /* age */]);
console.log(__WEBPACK_IMPORTED_MODULE_0__info__["b" /* height */]);
/***/ }),
/* 1 */
//===================  第1个元素（mathUtils.js） ==================
/***/ (function(module, exports) {
function add(num1, num2) {
  return num1 + num2
}
function mul(num1, num2) {
  return num1 * num2
}
module.exports = {
  add,
  mul
}
/***/ }),
/* 2 */
//===================  第3个元素（info.js） ==================
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
const name = 'why';
/* harmony export (immutable) */ __webpack_exports__["c"] = name;
const age = 18;
/* harmony export (immutable) */ __webpack_exports__["a"] = age;
const height = 1.88;
/* harmony export (immutable) */ __webpack_exports__["b"] = height;
/***/ })
/******/ ]);
// 三个模块中相互依赖，相互引用他们，主要的原因是底层类似于function _webpack_required(moduleId)函数作为支撑

在bundle.js的最后是一个( [ ] ),把数组里面有3个元素，代表了info.js，main.js，mathUtils.js三个模块，这三个模块作为参数传给了前面的function(modules){ }函数，其他的源码解析看我写的注释吧，有时间 再补充~。

参考来源：coderwhy老师