一個(gè)簡(jiǎn)單的示例查看其打包后的結(jié)果
// index.js
import {getA} from './a.js';
let name = 'haha';
function init() {
getA();
}
init();
// a.js
import B from './b.js';
let a = 'haha'
export function getA() {
B();
console.log(a);
return a;
}
// b.js
function B () {
console.log('i am a B')
}
export default B;
其打包后的代碼大體如下
- webpack經(jīng)過(guò)打包后组题， 所依賴的模塊通過(guò)modules參數(shù)進(jìn)行傳入锁施。 傳入的參數(shù)modules中每個(gè)模塊key具有唯一性，用對(duì)應(yīng)的path表示； value中則包括每個(gè)模塊下要執(zhí)行的內(nèi)容距糖。
- 采用匿名函數(shù)自執(zhí)行的方式進(jìn)行啟動(dòng)娶吞， installedModules用來(lái)緩存已經(jīng)require的模塊垒迂。
- webpack_require方法進(jìn)行模塊的引入， 執(zhí)行模塊代碼妒蛇。 在執(zhí)行過(guò)程中如再次遇到require模塊則遞歸執(zhí)行机断。
- 匿名函數(shù)對(duì)webpack_require進(jìn)行一系列的靜態(tài)方法和屬性設(shè)置后， 通過(guò)webpack_require進(jìn)行入口函數(shù)的調(diào)用绣夺。
webpack_require 上的靜態(tài)方法
-
webpack_require.d 給exports上的屬性定義一個(gè)getter方法吏奸，用于獲取。
如上述的a文件中 export方法會(huì)生成__webpack_require__.d(__webpack_exports__, \"getA\", function() { return getA; });這用通過(guò)exports的getA即可拿到對(duì)應(yīng)的方法陶耍。 webpack_exports 當(dāng)前模塊傳入的exports的對(duì)象奋蔚。 - webpack_require.r 在exports綁定__esModule對(duì)es6模塊進(jìn)行標(biāo)注。
- webpack_require_.n 獲取default的對(duì)象烈钞， 即直接import出來(lái)的對(duì)象泊碑。
依賴模塊編譯部分在下面采用對(duì)比的方式進(jìn)行查看
(function(modules) { // webpackBootstrap
// The module cache
var installedModules = {};
// 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;
}
// 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, { enumerable: true, get: getter });
}
};
// define __esModule on exports
__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
__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
return __webpack_require__(__webpack_require__.s = "./src/webpack/index.js");
})
/************************************************************************/
({
/***/ "./src/webpack/a.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getA\", function() { return getA; });\n/* harmony import */ var _b_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./b.js */ \"./src/webpack/b.js\");\n\nlet a = 'haha'\nfunction getA() {\n Object(_b_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\n console.log(a);\n return a;\n}\n\n//# sourceURL=webpack:///./src/webpack/a.js?");
/***/ }),
/***/ "./src/webpack/b.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\nfunction B () {\n console.log('i am a B')\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (B);\n\n//# sourceURL=webpack:///./src/webpack/b.js?");
/***/ }),
/***/ "./src/webpack/index.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _a_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a.js */ \"./src/webpack/a.js\");\n\nlet name = 'haha';\nfunction init() {\n Object(_a_js__WEBPACK_IMPORTED_MODULE_0__[\"getA\"])();\n}\ninit();\n\n//# sourceURL=webpack:///./src/webpack/index.js?");
/***/ })
});
index.js
- 首先通過(guò)webpack_require.r將當(dāng)前文件標(biāo)記為es6模塊
- 遇到import 將其轉(zhuǎn)為webpack_require進(jìn)行子模塊的加載。
- 將用到a模塊中的方法進(jìn)行替換
import {getA} from './a.js';
let name = 'haha';
function init() {
getA();
}
init();
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _a_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a.js */ "./src/webpack/a.js");
let name = 'haha';
function init() {
Object(_a_js__WEBPACK_IMPORTED_MODULE_0__["getA"])();
}
init();
a.js
- 與上述相同首先通過(guò)webpack_require.r將當(dāng)前文件標(biāo)記為es6模塊
- 將通過(guò)export 需要暴露到外部的屬性定義到模塊的exports對(duì)象上
- 遇到import 將其轉(zhuǎn)為webpack_require進(jìn)行子模塊的加載毯欣。
- 將用到b模塊中的方法進(jìn)行替換馒过， 該示例中返回的是b的default對(duì)象。
import B from './b.js';
let a = 'haha'
export function getA() {
B();
console.log(a);
return a;
}
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getA", function() { return getA; });
/* harmony import */ var _b_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./b.js */ "./src/webpack/b.js");
let a = 'haha'
function getA() {
Object(_b_js__WEBPACK_IMPORTED_MODULE_0__["default"])();
console.log(a);
return a;
}
b.js
- 通過(guò)webpack_require.r將當(dāng)前文件標(biāo)記為es6模塊
- 將default對(duì)象掛載到exports上酗钞。
function B () {
console.log('i am a B')
}
export default B;
...
__webpack_require__.r(__webpack_exports__);
function B () {
console.log('i am a B')
}
/* harmony default export */ __webpack_exports__["default"] = (B);
總結(jié)
從上面的示例中我們可以推測(cè)個(gè)一二腹忽， webpack打包會(huì)幫我們進(jìn)行相關(guān)文件依賴的收集， 會(huì)對(duì)原始文件進(jìn)行重新編譯算吩。
編譯后的文件完成文件的執(zhí)行留凭，exports對(duì)象的掛載、子文件的遞歸調(diào)用等工作偎巢。
