分析 webpack 打包后的代码
写在前面的
1. 版本说明
使用的 webpack 版本 3.0.0。
2. webpack 的核心思想
- 一切皆“模块（module）”
- 按需加载
一、开始
1. 准备
当前只创建一个文件 index.js，该文件作为入口文件，代码如下。
console.log('hello, world');
接着使用 webpack 来进行打包，执行的命令如下。
webpack index.js index.bundle.js
2. 分析
打包文件生成的一大堆代码，实际上就是一个自执行函数，仅传入一个参数为 modules，且该对象为一个数组。
(function (modules) { // ... })([function (module, exports) { function sayHello () { console.log('hello'); } }])
该函数的作用就是管理模块，它的内部定义了两个主要的对象 installedModules 对象和 __webpack_require__(moduleId) 函数对象。
installedModules 对象初始化代码如下。
var installedModules = {};
来看一下函数对象 __webpack_require__ 的定义，它的作用与 require 函数相同。
// require 函数
function __webapck_require__(moduleId) {
// 如果模块在缓存中 if (installedModules[moduleId]) { return installedModules[moduleId].exports; }
// 创建一个新的模块（并将它放在缓存中） var module = installedModules[moduleId] = { i: moduleId, l: false,// l是loaded的缩写，指代是否已经加载 exports: {} };
// 执行模块的函数 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 标记模块已经加载 module.l = true;
// 返回模块的 exports 对象 return module.exports; }
看到这里，我们可以看出 installedModules 对象其实是被当作字典使用，key 是模块的 id，value 是代表模块状态和导出的一个对象，如下。
{ i: moduleId, // 模块的 id l: false, // l是loaded的缩写，指代是否已经加载 exports: {} // 模块的导出对象 }
__webpack_require__ 还被定义了许多的静态方法和静态对象。
// 外放 modules 对象（__webpack_modules__) __webpack_require__.m = modules; // 外放模块的缓存 __webpack_require__.c = installedModules; // 定义 getter 函数以便友好的加载模块 __webpack_require__.d = function (exports, name, getter) { if(!__webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { configurable: false, enumerable: true, get: getter }); } };
__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) { Object.prototype.hasOwnProperty.call(object, property); };
// __webpack_public_path__
__webpack_require__.p = "";
在函数的最后，结果是导入 moduleId = 0 的模块，就是执行了入口文件。
return __webpack_require__(__webpack_require__.s = 0);
你定义的入口文件中的内容被转换为。
(function (module, __webpack_exports__, __webpack_require__) { console.log('hello, world!'); });
传入立即函数表达式中的参数为一个数组对象，而入口文件转换的函数为数组中的第一个元素。注意 webpack 添加的注释 /* 0 */ 代表该模块的 moduleId 为 0，而 webpack 其实是将每一个资源文件看作一个模块，并将其指定一个标识 moduleId。
[ /* 0 */ (function(module, __webpack_exports__, __webpack_require__) { // ... }) ]
二、添加依赖
1. 准备
添加一个新的 js 文件，命名为 util.js，代码如下。
export function add (a, b) {
return a + b; }
入口文件 index.js 代码修改如下。
import util from './util.js'
console.log('1 + 2 = ' + util.add(1, 2));
执行之前的命令，使用 webpack 构建工具进行打包。
2. 分析
此时查看 index.bundle.js 下的代码，之后生成的立即执行函数的传入参数发生变化，还记得之前说过该参数为一个数组，此时的数组如下。
[ /* 0 */ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_js__ = __webpack_require__(1); console.log('1 + 2 = ' + __WEBPACK_IMPORTED_MODULE_0__util_js__["a" /* default */].add(1 + 2)); }), /* 1 */ (function(module, __webpack_exports__, __webpack_require__) { "use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony default export */ __webpack_exports__["add"] = add;
function (a, b) { return a + b; } }) ]
可见，webpack 将每个文件视为一个独立的模块，它分析模块之间的依赖关系，将模块中 import export 相关的内容做一次替换，比如。
import b from './b' export default { name: 'c' } // 最后被转化为 var __WEBPACK_IMPORTED_MODULE_0_b__ = __webpack_require__(0) // 这里需要特别注意一点，webpack 将 a 属性作为某块的 default 值 __webpack_exports__["a"] = ({ name: 'c' })
再给所有模块外面加一层包装函数，使其成为模块初始化函数，接着把所有模块初始化函数合成一个数组，赋值给 modules 变量。
三、模块的动态导入
1. 准备
修改入口文件 index.js 的代码如下。
import('./util.js').then(function (util) {
console.log('1 + 2 = ' + util.add(1 + 2));
})
执行之前的命令，使用 webpack 构建工具进行打包。
2. 分析
这次打包后不仅获取了 index.bundle.js 文件，还产生了一个 0.index.bundle.js 文件，接下来先分析 o.index.bundle.js。
webpackJsonp([0],[ /* 0 */, /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony export (immutable) */ __webpack_exports__["add"] = add; function add (a, b) { return a + b; } /***/ }) ]);
之后可以看到该块代码以 JSONP 的形式被加载，这里可以看出该代码被加载后立即执行 webpackJsonp 这个方法，这个方法为 index.bundle.js 中新增的方法。在看这个方法之前，先看一下 index.bundle.js 中新增的一个对象。
var installedChunks = {
1: 0
};
该对象记录 chunk 的安装状态，而不记录 chunk 相关的具体内容，具体内容仍保存到 installedModules 对象中。installedChunks 也是被当作一个字典使用，key 为 chunk 的 id（此处要注意与 mouleId 的区别，每个 chunk 中至少会拥有一个 module），value 可为 0（已加载）、[resolve, reject]（正在加载）、undefined（未加载），可以在 requireEnsure(chunkId) 方法中观察到这种状态的变化。
__webpack_require__.e = function requireEnsure(chunkId) {
var installedChunkData = installedChunks[chunkId];
if (installedChunkData === 0) {
return new Promise(function(resolve) { resolve(); });
}
// 一个 Promise 意味“正在加载”
if (installedChunkData) {
return installedChunkData[2];
}
var promise = new Promise(function(resolve, reject) {
installedChunkData = installedChunks[chunkId] = [resolve, reject];
});
installedChunkData[2] = promise;
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.charset = 'utf-8';
script.async = true;
script.timeout = 120000;
if(__webpack_require__.nc) {
script.setAttribute("nonce", __webpack_require__.nc);
}
script.src = __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".bundle.js";
var timeout = setTimeout(onScriptComplete, 120000);
script.onerror = script.onload = onScriptComplete;
function onScriptComplete() {
// avoid mem leaks in IE.
script.onerror = script.onload = null;
clearTimeout(timeout);
var chunk = installedChunks[chunkId];
if(chunk !== 0) {
if(chunk) {
chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
}
installedChunks[chunkId] = undefined;
}
};
head.appendChild(script);
return promise;
};
最后看 webpackJsonp 函数，如下。
var parentJsonpFunction = window["webpackJsonp"]; window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) { // 添加 “moreModules”到 modules 对象上 // 然后所有的 “chunkIds” 已经加载并调用 callback var moduleId, chunkId, i = 0, resolves = [], result; for(; i<chunkIds.length; i++) { chunkId = chunkIds[i]; if(installedChunks[chunkId]) { resolves.push(installedChunks[chunkId][0]); } installedChunks[chunkId] = 0; } for(moduleId in moreModules) { if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { modules[moduleId] = moreModules[moduleId]; } } if(parentJsonFunction) parentJsonpFunction(chunkIds, moreModules, executeModules); while(resolves.length) { resolves.shift()(); } };
该方法有三个参数，chunkIds 为该模块的先行 chunk，moreModules 为此次新添加的模块，executeModules 暂时不知道其作用。该方法先对正在加载的先行 chunk 进行处理，还记的么？正在加载的 chunk 代表其状态的对象的值为 [resolve, reject]，这里将它们的 resolve 方法保存到局部定义的 resolves 数组中。还记得 modules 对象么，该对象为 webpack 生成的最外层立即执行函数的参数，这里继续将 moreModules 安装到 modules 对象中。最后执行保存在 resolves 数组中的 resolve 方法。
可见异步加载模块时主要是使用 Promise 来包装 jsonp 请求需要的 chunk 文件，之后将其添加到 modules 参数中，随后的调用与同步的步骤的相同的。
