Webpack 模块打包机制浅析

在官方定义中，Webpack 是一个现代 JavaScript 应用静态模块打包器。它统一了 JavaScript 在发展过程中出现的各种模块化方案，我们可以认为 Webpack 是 JavaScript 模块化的统一解决方案。

如果有对 JavaScript 各种模块化方案还不是很了解的小伙伴，建议阅读《JavaScript 模块的发展史》。

在 Webpack 对源代码的编译过程中，包含了一个模块打包的工作，其实就是 Webpack 从入口文件开始，逐级地将源代码中各个模块的依赖关系分析出来，输入最终的打包文件。

接下来让我们以 CommonJS 和 ES6 的模块机制为例，来更深入地理解 Webpack 的模块打包机制。

如下 webpack.config.js 的简单配置，在下述例子中，都是以该配置为准的。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode:'development'
};
CommonJS

在 CommonJS 的模块机制中，使用 require 引入模块，module.exports/exports 输出模块。

模块文件 bar.js 和入口文件 index.js 分别如下：

// src/bar.js
var num = 1;
function addNum(){
  num++;
}

module.exports = { 
  num: num, 
  addNum: addNum
}

// src/index.js
var bar = require('./bar.js');

console.log(bar.num)  // 1
bar.addNum();
console.log(bar.num); // 1

运行 webpack 命令后，我们可得到最终的输出文件 bundle.js，最终生成的 bundle.js 文件中的内容实际上是一个自执行函数，其传入的参数 modules 对象包含了入口文件以及各个依赖模块，形式如下：

{
  "./src/bar.js":(function (module, exports) {}),
  "./src/index.js":(function (module, exports, __webpack_require__) {})
}

在 modules 对象中，各个属性名为文件路径字符串，属性值为一个函数，其中包含了文件源代码中的内容，而源代码中的引入输出功能则是通过自定义的方式来实现的。

其中的关键便是 __webpack_require__ 方法：

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;
}

__webpack_require__ 方法接收模块唯一的 moduleId 作为参数，其主要做了以下几件事：

  1. 判断该模块是否存在缓存对象中，若是则返回缓存对象中对应模块，若否则定义模块对象并存储进缓存对象中；
  2. 执行 modules 对象中对应模块的函数（在函数中会将该模块输出的内容存储进 module.exports 中）；
  3. 返回该模块 module.exports；

所以，在最终生成的自执行函数中，除了对一些变量、方法的定义外，其最终返回了对入口文件的引用：

return __webpack_require__(__webpack_require__.s = "./src/index.js");

接下来便会按我们的预期去执行 __webpack_require__ 函数，传入的 moduleId 为 ./src/index.js，所以会执行 modules 对象中相应的属性值函数：

// modules 对象中 ./src/index.js 对应函数
(function(module, exports, __webpack_require__) {
  eval("// src/index.js\nvar bar = __webpack_require__(/*! ./bar.js */ \"./src/bar.js\");\n\nconsole.log(bar.num)  // 1\nbar.addNum();\nconsole.log(bar.num); // 1\n\n//# sourceURL=webpack:///./src/index.js?");
})

可以看到，在该函数中使用自定义的 __webpack_require__ 方法去替代了 CommonJS 中的 require 方法引入 bar.js 模块，并执行相应代码。

而在引入 ./src/bar.js 所对应的属性值函数时，也会执行函数内的代码：

// modules 对象中 ./src/bar.js 对应函数
(function(module, exports) {
  eval("var num = 1;\nfunction addNum() {\n  num++;\n}\n\nmodule.exports = {\n  num: num,\n  addNum: addNum\n}\n\n//# sourceURL=webpack:///./src/bar.js?");
})

我们会发现该函数的实际内容与 bar.js 模块的内容是一模一样的，但实际上不同的是函数中 module.exports 并不是属于 CommonJS 模块的语法，而是函数中传进来的 module 对象的属性，这个 module 是 Webpack 中自定义的模块对象，形式如下：

var module = installedModules[moduleId] = {
  i: moduleId,
  l: false,
  exports: {}
};

在 Webpack 中正是通过这种方式实现模块内容的输出。

至此，Webpack 已经实现了 CommonJS 模块的引入输出功能，接下来我们再来深究 CommonJS 模块输出的一个特性：CommonJS 模块输出的是值的缓存，不存在动态更新。

上述的例子，在 index.js 文件中先输出 num 的值，然后再调用 addNum 方法，最后再输出 num 的值，会发现 num 的值没有改变。因为 addNum 方法改变的是 bar.js 中 num 的值，而在 bar.js 中的输出是以浅拷贝的方式。

所以，在执行 ./src/bar.js 对应属性值函数时，可以发现如下代码：

module.exports = {\n  num: num,\n  addNum: addNum\n}

这也表明了在 Webpack 中模块的输出实现方式依旧遵循 CommonJS 模块输出的特性，输出其实是以浅拷贝的方式来实现的（注意这点，会与下述 ES6 中的 export 输出的特性做比较）。

ES6

在 ES6 模块化方案中，使用 import 引入模块，export 或 export default 输出模块。

export
// src/bar.js
var num = 1;
function addNum(){
  num++;
}

export { num, addNum }

// src/index.js
import { num, addNum } from './bar.js';

console.log(num)  // 1
addNum();
console.log(num); // 2

运行 webpack 命令后，同样地输出一个 bundle.js 文件，在 bundle.js 文件中同样是一个自执行函数，与 CommonJS 模块打包出来的文件基本上是一致的，不同的是在 modules 对象中对应的属性值函数不同。

ES6 模块机制中输出的特性是：export 语句输出的接口，与其对应的值是动态绑定关系。

在 modules 对象 中 ./src/index.js 对应的属性值函数为：

// modules 对象中 ./src/index.js 对应函数
(function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _bar_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./bar.js */ \"./src/bar.js\");\n\n\nconsole.log(_bar_js__WEBPACK_IMPORTED_MODULE_0__[\"num\"])  // 1\nObject(_bar_js__WEBPACK_IMPORTED_MODULE_0__[\"addNum\"])();\nconsole.log(_bar_js__WEBPACK_IMPORTED_MODULE_0__[\"num\"]); // 2\n\n//# sourceURL=webpack:///./src/index.js?");
})

./src/bar.js 对应的属性值函数为：

// modules 对象中 ./src/bar.js 对应函数
(function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"num\", function() { return num; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"addNum\", function() { return addNum; });\nvar num = 1;\nfunction addNum() {\n  num++;\n}\n\n\n\n//# sourceURL=webpack:///./src/bar.js?");
})

可以看出其不是直接通过 module.exports 浅拷贝的方式来实现的，而是通过一个 __webpack_require__.d 方法来实现：

__webpack_require__.d = function (exports, name, getter) {
  if (!__webpack_require__.o(exports, name)) {
    Object.defineProperty(exports, name, { enumerable: true, get: getter });
  }
};

该方法主要是直接通过定义对象属性的 getter，来实现对引入变量的访问仍是原先模块的内部变量。

而为什么仅仅定义了 getter 而不定义 setter 呢，是因为在 ES6 模块中，import命令输入的变量都是只读的，因为它的本质是输入接口；如果引入对变量是一个对象，改写变量的属性则是允许的。

export default
// src/bar.js
var num = 1;
function getNum(){
  return num;
}

export default getNum

// src/index.js
import getNum from './bar.js';

console.log(getNum())  // 1

同样的执行 webpack 命令打包得到 bundle.js。

在 modules 对象 中 ./src/index.js 对应的属性值函数为：

// modules 对象中 ./src/index.js 对应函数
(function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _bar_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./bar.js */ \"./src/bar.js\");\n\n\nconsole.log(Object(_bar_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])())  // 1\n\n\n//# sourceURL=webpack:///./src/index.js?");
})

在 modules 对象 中 ./src/bar.js 对应的属性值函数为:

// modules 对象中 ./src/bar.js 对应函数
(function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  eval("__webpack_require__.r(__webpack_exports__);\nvar num = 1;\nfunction getNum(){\n  return num;\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (getNum);\n\n//# sourceURL=webpack:///./src/bar.js?");
})

对于 export.default 来说，其特性与 CommonJS 类似，输出也是以浅拷贝的方式来进行的，不同的是其是存储在 module.exports 中的 default 属性中的，而在入口文件中则是通过对象的 default 属性来访问的。

参考文章：
webpack组织模块的原理 - 基础篇

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345