《Webpack实战 入门、进阶与调优（第2版）》- 第一章 webpack简介之打包代码分析
站长
· 阅读数 1
书接上回，本节重点关注打包代码的分析
注意 ⚠️
前提
为了展示模块引用关系，新增b.js，并且在a.js中使用。代码如下
a.js
import { bcd } from './test/b.js'
export default function () {
console.log('print b')
bcd()
}
b.js
export default function addContentTest() {
let a = 'bb'
document.write(a)
}
export function bcd() {
console.log('bcd')
}
源码展示
dist/main.js中注释看到很清晰；下面咱们会解析
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./a.js":
/*!**************!*\
!*** ./a.js ***!
\**************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _test_b_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./test/b.js */ "./test/b.js");
/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__() {
console.log('print b')
;(0,_test_b_js__WEBPACK_IMPORTED_MODULE_0__.bcd)()
}
/***/ }),
/***/ "./test/b.js":
/*!*******************!*\
!*** ./test/b.js ***!
\*******************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ bcd: () => (/* binding */ bcd),
/* harmony export */ "default": () => (/* binding */ addContentTest)
/* harmony export */ });
function addContentTest() {
let a = 'bb'
document.write(a)
}
function bcd() {
console.log('bcd')
}
/***/ })
/******/ });
/************************************************************************/
/******/ // 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.
(() => {
/*!******************!*\
!*** ./index.js ***!
\******************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _a_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a.js */ "./a.js");
(0,_a_js__WEBPACK_IMPORTED_MODULE_0__["default"])()
})();
/******/ })()
;
代码解析（直接写在注释上）
// *注：IIFE
(() => { // webpackBootstrap
"use strict";
/**
* __webpack_modules__ 文件模块对象
* key: 文件路径
* value: 生成该模块需要调用function
*/
var __webpack_modules__ = ({
// 模块a.js
"./a.js": ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => ( /* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
});
var _test_b_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./test/b.js */ "./test/b.js");
function __WEBPACK_DEFAULT_EXPORT__() {
console.log('print b');
(0, _test_b_js__WEBPACK_IMPORTED_MODULE_0__.bcd)()
}
}),
// 模块b.js
"./test/b.js": ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
bcd: () => ( /* binding */ bcd),
"default": () => ( /* binding */ addContentTest)
});
function addContentTest() {
let a = 'bb'
document.write(a)
}
function bcd() {
console.log('bcd')
}
})
});
// webpack固定代码-start
// 模块缓存
var __webpack_module_cache__ = {};
// require方法，可以理解为CommonJs的require. e.g: const a = require('a.js)
function __webpack_require__(moduleId) {
// 1.有缓存，取缓存
var cachedModule = __webpack_module_cache__[moduleId];
if (cachedModule !== undefined) {
return cachedModule.exports;
}
// 2.没有缓存，新建一个module
var module = __webpack_module_cache__[moduleId] = {
exports: {}
};
// 3.产生key对应的模块
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
// 4.返回
return module.exports;
}
/**
* __webpack_require__自身的方法-start
* 1. __webpack_require__.d => exports对象 定义新属性
* 2. __webpack_require__.o => hasOwnProperty
* 3. __webpack_require__.r => 把 exports对象 定义为一个Module（具体原因我也不知道，求留言评论）
*/
(() => {
__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_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
})();
(() => {
__webpack_require__.r = (exports) => {
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
Object.defineProperty(exports, Symbol.toStringTag, {
value: 'Module'
});
}
Object.defineProperty(exports, '__esModule', {
value: true
});
};
})();
// __webpack_require__自身的方法-start
// webpack固定代码-end
var __webpack_exports__ = {};
// entry 入口文件的执行
(() => {
__webpack_require__.r(__webpack_exports__);
var _a_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./a.js */ "./a.js");
(0, _a_js__WEBPACK_IMPORTED_MODULE_0__["default"])()
})();
})();
(本节完 The End)