读 Webpack 生成的代码

webpackUniversalModuleDefinition

通用模块定义:

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === ‘object‘ && typeof module === ‘object‘) // CommonJS模块, 以及ES Modules模块
		module.exports = factory();
	else if(typeof define === ‘function‘ && define.amd) // AMD模块
		define([], factory);
	else { // web或其它, 导出到exports对象或global
		var a = factory();
		for(var i in a) (typeof exports === ‘object‘ ? exports : root)[i] = a[i];
	}
})(global, function() {
return /******/ (() => { // webpackBootstrap
/******/ 	"use strict";

为什么module.exports = factory();也可以用于ES Modules模块呢?

以module.exports = xxx;赋值语句导出ES Modules模块

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "fetchPublicIP": () => /* reexport safe */ _network__WEBPACK_IMPORTED_MODULE_0__.fetchPublicIP,
/* harmony export */   "ip": () => /* reexport safe */ _network__WEBPACK_IMPORTED_MODULE_0__.ip,
/* harmony export */   "default": () => /* reexport safe */ _network__WEBPACK_IMPORTED_MODULE_0__.default
/* harmony export */ });

Object [Module] {
  fetchPublicIP: [Getter],
  ip: [Getter],
  default: [Getter]
}

__webpack_require__.d是什么呢?

/******/ 	/* 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/compat get default export */
/******/ 	(() => {
/******/ 		// getDefaultExport function for compatibility with non-harmony modules
/******/ 		__webpack_require__.n = (module) => {
/******/ 			var getter = module && module.__esModule ?
/******/ 				() => module[‘default‘] :
/******/ 				() => module;
/******/ 			__webpack_require__.d(getter, { a: getter });
/******/ 			return getter;
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* 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 });
/******/ 		};
/******/ 	})();

读 Webpack 生成的代码

上一篇:js将时间戳/Date(1603938259000)/转换成正常时间格式


下一篇:css - 去掉图片下的白边