一个简单的示例查看其打包后的结果
// 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经过打包后， 所依赖的模块通过modules参数进行传入。 传入的参数modules中每个模块key具有唯一性，用对应的path表示； value中则包括每个模块下要执行的内容。
- 采用匿名函数自执行的方式进行启动， installedModules用来缓存已经require的模块。
- webpack_require方法进行模块的引入， 执行模块代码。 在执行过程中如再次遇到require模块则递归执行。
- 匿名函数对webpack_require进行一系列的静态方法和属性设置后， 通过webpack_require进行入口函数的调用。
webpack_require 上的静态方法
-
webpack_require.d 给exports上的属性定义一个getter方法，用于获取。
如上述的a文件中 export方法会生成__webpack_require__.d(__webpack_exports__, \"getA\", function() { return getA; });这用通过exports的getA即可拿到对应的方法。 webpack_exports 当前模块传入的exports的对象。 - webpack_require.r 在exports绑定__esModule对es6模块进行标注。
- webpack_require_.n 获取default的对象， 即直接import出来的对象。
依赖模块编译部分在下面采用对比的方式进行查看
(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
- 首先通过webpack_require.r将当前文件标记为es6模块
- 遇到import 将其转为webpack_require进行子模块的加载。
- 将用到a模块中的方法进行替换
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
- 与上述相同首先通过webpack_require.r将当前文件标记为es6模块
- 将通过export 需要暴露到外部的属性定义到模块的exports对象上
- 遇到import 将其转为webpack_require进行子模块的加载。
- 将用到b模块中的方法进行替换， 该示例中返回的是b的default对象。
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
- 通过webpack_require.r将当前文件标记为es6模块
- 将default对象挂载到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);
总结
从上面的示例中我们可以推测个一二， webpack打包会帮我们进行相关文件依赖的收集， 会对原始文件进行重新编译。
编译后的文件完成文件的执行，exports对象的挂载、子文件的递归调用等工作。
网友评论