在平時開發中我們經常會用到Webpack這個時下最流行的前端打包工具。它打包開發程式碼，輸出能在各種瀏覽器執行的程式碼，提升了開發至釋出過程的效率。
我們知道一份Webpack配置檔案主要包含入口（entry）、輸出檔案（output）、模式、載入器（Loader）、外掛（Plugin）等幾個部分。但如果只需要組織 JS 檔案的話，指定入口和輸出檔案路徑即可完成一個迷你專案的打包。下面我們來通過一個簡單的專案來看一下Webpack是怎樣執行的。
同步載入
本文使用 webpack ^4.30.0 作示例.為了更好地觀察產出的檔案，我們將模式設定為 development 關閉程式碼壓縮，再開啟 source-map 支援原始原始碼除錯。除此之外。我們還簡單的寫了一個外掛MyPlugin來去除原始碼中的註釋。
新建src/index.js
console.log('Hello webpack!');新建webpack配置檔案webpack.config.js
const path = require('path');
const MyPlugin = require('./src/MyPlugin.js')
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist')
},
plugins:[
new MyPlugin()
]
};新建src/MyPlugin.js。瞭解webpack外掛更多資訊
class MyPlugin {
constructor(options) {
this.options = options
this.externalModules = {}
}
apply(compiler) {
var reg = /("([^\\\"]*(\\.)?)*")|('([^\\\']*(\\.)?)*')|(\/{2,}.*?(\r|\n))|(\/\*(\n|.)*?\*\/)|(\/\*\*\*\*\*\*\/)/g
compiler.hooks.emit.tap('CodeBeautify', (compilation)=> {
Object.keys(compilation.assets).forEach((data)=> {
let content = compilation.assets[data].source() // 欲處理的文字
content = content.replace(reg, function (word) { // 去除註釋後的文字
return /^\/{2,}/.test(word) || /^\/\*!/.test(word) || /^\/\*{3,}\//.test(word) ? "" : word;
});
compilation.assets[data] = {
source(){
return content
},
size(){
return content.length
}
}
})
})
}
}
module.exports = MyPlugin現在我們執行命令 webpack --config webpack.config.js ，打包完成後會多出一個輸出目錄 dist：dist/main.js。main 是 webpack 預設設定的輸出檔名，我們快速瞄一眼這個檔案：
(function(modules){
// ...
})({
"./src/index.js": (function(){
// ...
})
});整個檔案只含一個立即執行函式（IIFE），我們稱它為 webpackBootstrap，它僅接收一個物件 —— 未載入的 模組集合（modules），這個 modules 物件的 key 是一個路徑，value 是一個函式。你也許會問，這裡的模組是什麼？它們又是如何載入的呢？
在細看產出程式碼前，我們先豐富一下原始碼：
新檔案 src/utils/math.js：
export const plus = (a, b) => {
return a + b;
};修改src/index.js：
import { plus } from './utils/math.js';
console.log('Hello webpack!');
console.log('1 + 2: ', plus(1, 2));我們按照 ES 規範的模組化語法寫了一個簡單的模組 src/utils/math.js，給 src/index.js 引用。Webpack 用自己的方式支援了 ES6 Module 規範，前面提到的 module 就是和 ES6 module 對應的概念。
接下來我們看一下這些模組是如何通 ES5 程式碼實現的。再次執行命令 webpack --config webpack.config.js 後檢視輸出檔案：
(function(modules){
// ...
})({
"./src/index.js": (function(){
// ...
}),
"./src/utils/math.js": (function() {
// ...
})
});IIFE 傳入的 modules 物件裡多了一個鍵值對，對應著新模組 src/utils/math.js，這和我們在原始碼中拆分的模組互相呼應。然而，有了 modules 只是第一步，這份檔案最終達到的效果應該是讓各個模組按開發者編排的順序執行。
探究 webpackBootstrap
接下來看看 webpackBootstrap 函式中有些什麼：
// webpackBootstrap
(function(modules){
// 快取 __webpack_require__ 函式載入過的模組
var installedModules = {};
/**
* Webpack 載入函式，用來載入 webpack 定義的模組
* @param {String} moduleId 模組 ID，一般為模組的原始碼路徑，如 "./src/index.js"
* @returns {Object} exports 匯出物件
*/
function __webpack_require__(moduleId) {
// ...
}
// 在 __webpack_require__ 函式物件上掛載一些變數及函式 ...
// 傳入表示式的值為 "./src/index.js"
return __webpack_require__(__webpack_require__.s = "./src/index.js");
})(/* modules */);可以看到其實主要做了兩件事：
- 定義一個模組載入函式
__webpack_require__。 - 使用載入函式載入入口模組
"./src/index.js"。
整個 webpackBootstrap 中只出現了入口模組的影子，那其他模組又是如何載入的呢？我們順著 __webpack_require__("./src/index.js") 細看載入函式的內部邏輯：
function __webpack_require__(moduleId) {
// 重複載入則利用快取
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 如果是第一次載入，則初始化模組物件，並快取
var module = installedModules[moduleId] = {
i: moduleId, // 模組 ID
l: false, // 模組載入標識
exports: {} // 模組匯出物件
};
/**
* 執行模組
* @param module.exports -- 模組匯出物件引用，改變模組包裹函式內部的 this 指向
* @param module -- 當前模組物件引用
* @param module.exports -- 模組匯出物件引用
* @param __webpack_require__ -- 用於在模組中載入其他模組
*/
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 模組載入標識置為已載入
module.l = true;
// 返回當前模組的匯出物件引用
return module.exports;
}首先，載入函式使用了閉包變數 installedModules，用來將已載入過的模組儲存在記憶體中。 接著是初始化模組物件，並把它掛載到快取裡。然後是模組的執行過程，載入入口檔案時 modules[moduleId] 其實就是 ./src/index.js 對應的模組函式。執行模組函式前傳入了跟模組相關的幾個實參，讓模組可以匯出內容，以及載入其他模組的匯出。最後標識該模組載入完成，返回模組的匯出內容。
根據 __webpack_require__ 的快取和匯出邏輯，我們得知在整個 IIFE 執行過程中，載入已快取的模組時，都會直接返回installedModules[moduleId].exports，換句話說，相同的模組只有在第一次引用的時候才會執行模組本身。
模組執行函式
__webpack_require__ 中通過 modules[moduleId].call() 執行了模組執行函式，下面我們就進入到 webpackBootstrap 的引數部分，看看模組的執行函式。
/*** 入口模組 ./src/index.js ***/
"./src/index.js": (function (module, __webpack_exports__, __webpack_require__) {
"use strict";
// 用於區分 ES 模組和其他模組規範，不影響理解 demo，戰略跳過。
__webpack_require__.r(__webpack_exports__);
/* harmony import */
// 源模組程式碼中，`import {plus} from './utils/math.js';` 語句被 loader 解析轉化。
// 載入 "./src/utils/math.js" 模組，
var _utils_math_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/utils/math.js");
console.log('Hello webpack!');
console.log('1 + 2: ', Object(_utils_math_js__WEBPACK_IMPORTED_MODULE_0__["plus"])(1, 2));
}),
"./src/utils/math.js": (function (module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */
// 源模組程式碼中，`export` 語句被 loader 解析轉化。
__webpack_require__.d(__webpack_exports__, "plus", function () {
return plus;
});
const plus = (a, b) => {
return a + b;
};
})執行順序是：入口模組 -> 工具模組 -> 入口模組。入口模組中首先就通過 __webpack_require__("./src/utils/math.js") 拿到了工具模組的 exports 物件。再看工具模組，ES 匯出語法轉化成了__webpack_require__.d(__webpack_exports__, [key], [getter])，而 __webpack_require__.d 函式的定義在 webpackBootstrap 內：
// 定義 exports 物件匯出的屬性。
__webpack_require__.d = function (exports, name, getter) {
// 如果 exports （不含原型鏈上）沒有 [name] 屬性，定義該屬性的 getter。
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
enumerable: true,
get: getter
});
}
};
// 包裝 Object.prototype.hasOwnProperty 函式。
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};可見 __webpack_require__.d 其實就是 Object.defineProperty 的簡單包裝.
引用工具模組匯出的變數後，入口模組再執行它剩餘的部分。至此，Webpack 基本的模組執行過程就結束了。
好了，我們用流程圖總結一下 Webpack 模組的載入思路：
非同步載入
有上面的打包我們發現將不同的打包進一個 main.js 檔案。main.js 會集中消耗太多網路資源，導致使用者需要等待很久才可以開始與網頁互動。
一般的解決方式是：根據需求降低首次載入檔案的體積，在需要時（如切換前端路由器，互動事件回撥）非同步載入其他檔案並使用其中的模組。
Webpack 推薦用 ES import() 規範來非同步載入模組，我們根據 ES 規範修改一下入口模組的 import 方式，讓其能夠非同步載入模組：
src/index.js
console.log('Hello webpack!');
window.setTimeout(() => {
import('./utils/math').then(mathUtil => {
console.log('1 + 2: ' + mathUtil.plus(1, 2));
});
}, 2000);
工具模組（src/utils/math.js）依然不變，在webpack 配置裡，我們指定一下資原始檔的公共資源路徑（publicPath），後面的探索過程中會遇到。
const path = require('path');
const MyPlugin = require('./src/MyPlugin.js')
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/'
},
plugins:[
new MyPlugin()
]
};
接著執行一下打包，可以看到除了 dist/main.js 外，又多了一個 dist/0.js ./src/utils/math.js。模組從main chunk 遷移到了 0 chunk 中。而與 demo1 不同的是，main chunk 中新增了一些用於非同步載入的程式碼，我們概覽一下：
// webpackBootstrap
(function (modules) {
// 載入其他 chunk 後的回撥函式
function webpackJsonpCallback(data) {
// ...
}
// ...
// 用於快取 chunk 的載入狀態，0 為已載入
var installedChunks = {
"main": 0
};
// 拼接 chunk 的請求地址
function jsonpScriptSrc(chunkId) {
// ...
}
// 同步 require 函式，內容不變
function __webpack_require__(moduleId) {
// ...
}
// 非同步載入 chunk，返回封裝載入過程的 promise
__webpack_require__.e = function requireEnsure(chunkId) {
// ...
}
// ...
// defineProperty 的包裝，內容不變
__webpack_require__.d = function (exports, name, getter) {}
// ...
// 根據配置檔案確定的 publicPath
__webpack_require__.p = "/dist/";
/**** JSONP 初始化 ****/
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
jsonpArray.push = webpackJsonpCallback;
jsonpArray = jsonpArray.slice();
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
var parentJsonpFunction = oldJsonpFunction;
/**** JSONP 初始化 ****/
return __webpack_require__(__webpack_require__.s = "./src/index.js");
})({
"./src/index.js": (function(module, exports, __webpack_require__) {
document.write('Hello webpack!\n');
window.setTimeout(() => {
__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./utils/math */ "./src/utils/math.js")).then(mathUtil => {
console.log('1 + 2: ' + mathUtil.plus(1, 2));
});
}, 2000);
})
})可以看到 webpackBootstrap 的函式體部分增加了一些內容，引數部分移除了 "./src/utils/math.js" 模組。跟著包裹函式的執行順序，我們先聚焦到「JSONP 初始化」部分：
// 儲存 jsonp 的陣列，首次執行為 []
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
// 儲存 jsonpArray 的 push 函式，首次執行為 Array.prototype.push
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
// 將 jsonpArray 的 push 重寫為 webpackJsonpCallback （載入其他 chunk 後的回撥函式）
jsonpArray.push = webpackJsonpCallback;
// 將 jsonpArray 重置為正常陣列，push 重置為 Array.prototype.push
jsonpArray = jsonpArray.slice();
// 由於 jsonpArray 為 []，不做任何事
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
// Array.prototype.push
var parentJsonpFunction = oldJsonpFunction;初始化結束後，變化就是 window 上掛載了一個 webpackJsonp 陣列，它的值為 []；此外，這個陣列的 push 被改寫為 webpackJsonpCallback 函式，我們在後面會提到這些準備工作的作用。
接著是 __webpack_require__ 入口模組，由於 __webpack_require__ 函式沒有改變，我們繼續觀察入口模組執行函式有了什麼變化。
顯然，import('../utils/math.js') 被轉化為__webpack_require__.e(0).then(__webpack_require__.bind(null, "./src/utils/math.js"))。0 是 ./src/utils/math.js 所在 chunk 的id，「同步載入模組」的邏輯拆分成了「先載入 chunk，完成後再載入模組」。
我們翻到 __webpack_require__.e 的定義位置：
__webpack_require__.e = function requireEnsure(chunkId) {
var promises = [];
// installedChunks 是在 webpackBootstrap 中維護的 chunk 快取
var installedChunkData = installedChunks[chunkId];
// chunk 未載入
if(installedChunkData !== 0) {
// installedChunkData 為 promise 表示 chunk 載入中
if(installedChunkData) {
promises.push(installedChunkData[2]);
} else {
/*** 首次載入 chunk: ***/
// 初始化 promise 物件
var promise = new Promise(function(resolve, reject) {
installedChunkData = installedChunks[chunkId] = [resolve, reject];
});
promises.push(installedChunkData[2] = promise);
// 建立 script 標籤載入 chunk
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
var onScriptComplete;
// ... 省略一些 script 屬性設定
// src 根據 publicPath 和 chunkId 拼接
script.src = jsonpScriptSrc(chunkId);
// 載入結束回撥函式，處理 script 載入完成、載入超時、載入失敗的情況
onScriptComplete = function (event) {
script.onerror = script.onload = null; // 避免 IE 記憶體洩漏問題
clearTimeout(timeout);
var chunk = installedChunks[chunkId];
// 處理 script 載入完成，但 chunk 沒有載入完成的情況
if(chunk !== 0) {
// chunk 載入中
if(chunk) {
var errorType = event && (event.type === 'load' ? 'missing' : event.type);
var realSrc = event && event.target && event.target.src;
var error = new Error('Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')');
error.type = errorType;
error.request = realSrc;
// reject(error)
chunk[1](error);
}
// 統一將沒有載入的 chunk 標記為未載入
installedChunks[chunkId] = undefined;
}
};
// 設定 12 秒超時時間
var timeout = setTimeout(function(){
onScriptComplete({ type: 'timeout', target: script });
}, 120000);
script.onerror = script.onload = onScriptComplete;
head.appendChild(script);
/*** 首次載入 chunk ***/
}
}
return Promise.all(promises);
};看起來有點長，我們一步步剖析，先從第一行和最後一行來看，整個函式將非同步載入的過程封裝到了 promise 中，最終匯出。
接著從第二行開始，installedChunkData 從快取中取值，顯然首次載入 chunk 時此處是 undefined。接下來，installedChunkData 的 undefined 值觸發了第一層 if 語句的判斷條件。緊接著進行到第二層 if 語句，此時根據判斷條件走入 else 塊，這裡 if 塊裡的內容我們先戰略跳過，else 裡主要有兩塊內容，一是 chunk 指令碼載入過程，這個過程建立了一個 script 標籤，使其請求 chunk所在地址並執行 chunk 內容；二是初始化 promise ，並用 promise 控制 chunk 檔案載入過程。
不過，我們只在這段 else 程式碼塊中找到了 reject 的使用處，也就是在 chunk 載入異常時 chunk[1](error) 的地方，但並沒發現更重要的 resolve 的使用地點，僅僅是把 resolve 掛在了快取上（installedChunks[chunkId] = [resolve, reject]）。
這裡的 chunk 檔案載入下來會發生什麼呢？讓我們開啟dist/0.js 一探究竟：
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0], {
"./src/utils/math.js":
(function (module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */
__webpack_require__.d(__webpack_exports__, "plus", function () {
return plus;
});
const plus = (a, b) => {
return a + b;
};
})
}]);
我們發現了：
- 久違的 ./src/utils/math.js 模組
- window["webpackJsonp"] 陣列的使用地點
這段程式碼開始執行，把非同步載入相關的 chunk id 與模組傳給 push 函式。而前面已經提到過，window["webpackJsonp"] 陣列的 push 函式已被重寫為 webpackJsonpCallback 函式，它的定義位置在 webpackBootstrap 中：
function webpackJsonpCallback(data) {
var chunkIds = data[0];
var moreModules = data[1];
// then flag all "chunkIds" as loaded and fire callback
var moduleId, chunkId, i = 0, resolves = [];
// 將 chunk 標記為已載入
for(;i < chunkIds.length; i++) {
chunkId = chunkIds[i];
if(installedChunks[chunkId]) {
resolves.push(installedChunks[chunkId][0]);
}
installedChunks[chunkId] = 0;
}
// 把 "moreModules" 加到 webpackBootstrap 中的 modules 閉包變數中。
for(moduleId in moreModules) {
if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
modules[moduleId] = moreModules[moduleId];
}
}
// parentJsonpFunction 是 window["webpackJsonp"] 的原生 push
// 將 data 加入全域性陣列，快取 chunk 內容
if(parentJsonpFunction) parentJsonpFunction(data);
// 執行 resolve 後，載入 chunk 的 promise 狀態變為 resolved，then 內的函式開始執行。
while(resolves.length) {
resolves.shift()();
}
};走進這個函式中，意味著非同步載入的 chunk 內容已經拿到，這個時候我們要完成兩件事，一是讓依賴這次非同步載入結果的模組繼續執行，二是快取載入結果。
關於第一點，我們回憶一下之前 __webpack_require__.e 的內容，此時 chunk 還處於「載入中」的狀態，也就是說對應的 installedChunks[chunkId] 的值此時為 [resolve, reject, promise]。 而這裡，chunk 已經載入，但 promise 還未決議，於是 webpackJsonpCallback 內部定義了一個 resolves 變數用來收集 installedChunks 上的 resolve 並執行它。
接下來說到第二點，就要涉及幾個層面的快取了。
首先是 chunk 層面，這裡有兩個相關操作，操作一將 installedChunks[chunkId] 置為 0 可以讓 __webpack_require__.e 在第二次載入同一 chunk 時返回一個立即決議的 promise（Promise.all([])）；操作二將 chunk data 新增進 window["webpackJsonp"] 陣列，可以在多入口模式時，方便地拿到已載入過的 chunk 快取。通過以下程式碼實現：
/*** 快取執行部分 ***/
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
// ...
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
var parentJsonpFunction = oldJsonpFunction;
/*** 快取執行部分 ***/
/*** 快取新增部分 ***/
function webpackJsonpCallback(data) {
//...
// 此處的 parentJsonpFunction 是 window["webpackJsonp"] 陣列的原生 push
if (parentJsonpFunction) parentJsonpFunction(data);
//...
}
/*** 快取新增部分 ***/而在 modules 層面，chunk 中的 moreModules 被合入入口檔案的 modules 中，可供下一個微任務中的 __webpack_require__ 同步載入模組。
({
"./src/index.js":
(function (module, exports, __webpack_require__) {
console.log('Hello webpack!');
window.setTimeout(() => {
__webpack_require__.e(0).then(__webpack_require__.bind(null, "./src/utils/math.js")).then(mathUtil => {
console.log('1 + 2: ' + mathUtil.plus(1, 2));
});
}, 2000);
})
});__webpack_require__.e(0) 返回的 promise 決議後，__webpack_require__.bind(null, "./src/utils/math.js") 可以載入到 chunk 攜帶的模組，並返回模組作為下一個微任務函式的入參，接下來就是 Webpack Loader 翻譯過的其他業務程式碼了。
現在讓我們把非同步流程梳理一下：
