webpack打包的bundle.js源码分析

webpack.config.js

const {resolve} = require('path');
module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: resolve('dist')
	}
};

源文件

index.js：入口

import * as operation from './oper.js';
console.log(`i am index.js, and i imported a module whose description is: ${operation.desc}.`);
console.log(`4 + 5 = ${operation.add(4, 5)}`);
console.log(`4 * 5 = ${operation.mul(4, 5)}`);

oper.js：自定义模块

function add(){
	return [].slice.call(arguments).reduce( (acc, val)=>acc+val );
}
function mul(){
	return [].slice.call(arguments).reduce( (acc, val)=>acc*val );
}
var desc = 'some math operations';
export {add, mul, desc};

webpack4的bundle.js

// debugger;
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/    // 此函数执行一个模块（已经被webpack封装成了函数，即modules），返回这个模块的导出
/******/ 		// 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, // l = loaded
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
            // webpack把ES6模块风格的JS文件转成CommonJS，故传入module、module.exports和require
/******/ 		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;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
          // 全部模块的原始函数
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
          // 模块缓存
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
          // 工具函数，设置一个返回模块导出的name对应的值的getter
          // 比如模块oper.js导出了desc，那么它导出的exports对象存在一个叫做desc的访问器getter，此访问器通过闭包返回原本desc对应的值
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
          // 给exports对象设置相关属性，表示此对象是ES6模块
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
          // 尚不清楚
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
          // harmony module就是ES6模块
          // 如果是ES6的module就取default，不是ES6的module就直接返回此module
          // 当oper.js使用`module.exports = {add, mul, desc};`导出时
          // 当index.js使用`import operation from './oper.js';`导入时
          // oper.js不会被webpack做任何处理，意味着oper.js导出的exports对象不会被__webpack_require__.r函数加工，即表明此exports不是ES6模块
          // 同时将会在index.js观察到__webpack_require__.n被调用了，代码如下
          // /* harmony import */ var _oper_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./oper.js */ "./src/oper.js");
          // /* harmony import */ var _oper_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_oper_js__WEBPACK_IMPORTED_MODULE_0__);
/******/ 	__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); // 这个设置访问器（由于访问器就叫做getter，但是此函数内部也有个getter变量，为避免混淆，本句的访问器和getter不是一个意思）的方法很巧妙，getter函数给自身设置了一个叫做a的访问器，而这个访问器又是getter函数本身，调用这个getter函数会返回闭包当中的module.default或module
/******/ 		return getter;
            // 返回的getter是一个函数，函数自身属性`a`就是默认的导出
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
          // 工具函数hasOwnProperty
/******/ 	__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表示入口模块
/******/ 	return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/************************************************************************/
/******/ ({
// webpack会将全部的ES模块语法转成CommonJS模块语法
// ES6的导出和导入都会被等效地替换成__webpack_require__.d和 __webpack_require__函数
/***/ "./src/index.js":
/*!**********************!*
  !*** ./src/index.js ***!
  **********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// 严格模式下的eval会生成自己的作用域，避免影响其原本所在的作用域
// 字符串末尾的`sourceURL`表示源映射，能将此eval的代码映射到一个虚拟的JS文件，可以在浏览器开发者工具的Sources(Chrome)和调试器(FireFox)观察到
// 比如下面eval的代码会被映射到webpack:///src/index.js这个文件，就可以很方便地在此JS文件中打断点调试
eval("__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _oper_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./oper.js */ "./src/oper.js");


console.log(`i am index.js, and i imported a module whose description is: ${_oper_js__WEBPACK_IMPORTED_MODULE_0__["desc"]}.`);

console.log(`4 + 5 = ${_oper_js__WEBPACK_IMPORTED_MODULE_0__["add"](4, 5)}`);
console.log(`4 * 5 = ${_oper_js__WEBPACK_IMPORTED_MODULE_0__["mul"](4, 5)}`);


//# sourceURL=webpack:///./src/index.js?");

/***/ }),

/***/ "./src/oper.js":
/*!*********************!*
  !*** ./src/oper.js ***!
  *********************/
/*! exports provided: add, mul, desc */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mul", function() { return mul; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "desc", function() { return desc; });
function add(){
	return [].slice.call(arguments).reduce( (acc, val)=>acc+val );
}

function mul(){
	return [].slice.call(arguments).reduce( (acc, val)=>acc*val );
}

var desc = 'some math operations';




//# sourceURL=webpack:///./src/oper.js?");

/***/ })

/******/ });

打包后的index.js：

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _oper_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./oper.js */ "./src/oper.js");
console.log(`i am index.js, and i imported a module whose description is: ${_oper_js__WEBPACK_IMPORTED_MODULE_0__["desc"]}.`);
console.log(`4 + 5 = ${_oper_js__WEBPACK_IMPORTED_MODULE_0__["add"](4, 5)}`);
console.log(`4 * 5 = ${_oper_js__WEBPACK_IMPORTED_MODULE_0__["mul"](4, 5)}`);
//# sourceURL=webpack:///./src/index.js?

打包后的oper.js：

__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mul", function() { return mul; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "desc", function() { return desc; });
function add(){
	return [].slice.call(arguments).reduce( (acc, val)=>acc+val );
}
function mul(){
	return [].slice.call(arguments).reduce( (acc, val)=>acc*val );
}
var desc = 'some math operations';
//# sourceURL=webpack:///./src/oper.js?

webpack5的bundle.js

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 * webpack处于`mode: development`时默认使用`devtool: eval`
 * 上述是对处于`devtool: eval`模式的一些注意事项
 * 使用任何`eval`的devtool都会有类似的注意事项，比如`devtool: eval-source-map`
 * 打包结果和webpack4很像，只是少了webpack4内置的兼容函数，剩下的函数和变量作用都和webpack4差不多
 */
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

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

eval("__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _oper_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./oper.js */ "./src/oper.js");


console.log(`i am index.js, and i imported a module whose description is: ${_oper_js__WEBPACK_IMPORTED_MODULE_0__.desc}.`);

console.log(`4 + 5 = ${_oper_js__WEBPACK_IMPORTED_MODULE_0__.add(4, 5)}`);
console.log(`4 * 5 = ${_oper_js__WEBPACK_IMPORTED_MODULE_0__.mul(4, 5)}`);


//# sourceURL=webpack://webpacktest5/./src/index.js?");

/***/ }),

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

eval("__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "add": () => (/* binding */ add),
/* harmony export */   "mul": () => (/* binding */ mul),
/* harmony export */   "desc": () => (/* binding */ desc)
/* harmony export */ });
function add(){
	return [].slice.call(arguments).reduce( (acc, val)=>acc+val );
}

function mul(){
	return [].slice.call(arguments).reduce( (acc, val)=>acc*val );
}

var desc = 'some math operations';




//# sourceURL=webpack://webpacktest5/./src/oper.js?");

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// 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 */
          // 使用一个IIFE给__webpack_require__添加一个方法，下同
/******/ 	(() => {
/******/ 		// 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 });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.js");
/******/ 	
/******/ })()
;