Webpack 模組打包機制淺析

淘淘笙悅發表於2019-03-28
Web

在官方定義中，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組織模組的原理 - 基礎篇

公眾號不定時分享個人在前端方面的學習經驗，歡迎關注。

Webpack 模組打包機制淺析

相關文章