以下分別是a.js、b.js亚情、c.js及webpack.dev.js
var c=require("./c.js");
console.log('a==', c);
var c=require("./c.js");
console.log('b==', c);
var c=2;
exports.c=c;
'use strict';
const path = require('path');
module.exports = {
entry: {
a: './a.js',
b: './b.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
mode: 'none',
optimization: {
splitChunks: {
minSize: 0,
cacheGroups: {
commons: {
name: 'commons',
chunks: 'all',
minChunks: 2
}
}
}
},
};
打包文件分析a.js
打包后的a文件是一個(gè)立即執(zhí)行函數(shù)，函數(shù)中的代碼如下：
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;
這段代碼主要做了如下幾件事：
1）定義了一個(gè)全局變量webpackJsonp,將原生方法push改成webpackJsonpCallback方法哈雏。
2）將原生push方法備份至parentJsonpFunction楞件。
3）jsonpArray方法存儲(chǔ)webpackJsonp中的值。
webpackJsonpCallback函數(shù)分析
function webpackJsonpCallback(data) {
var chunkIds = data[0];
var moreModules = data[1];
var executeModules = data[2];
// add "moreModules" to the modules object,
// then flag all "chunkIds" as loaded and fire callback
var moduleId, chunkId, i = 0, resolves = [];
for(;i < chunkIds.length; i++) {
chunkId = chunkIds[i];
if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && 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(parentJsonpFunction) parentJsonpFunction(data);
while(resolves.length) {
resolves.shift()();
}
// add entry modules from loaded chunk to deferred list
deferredModules.push.apply(deferredModules, executeModules || []);
// run deferred modules when all chunks ready
return checkDeferredModules();
};
參數(shù)：
參數(shù)是一個(gè)數(shù)組裳瘪，有三個(gè)元素
第一個(gè)元素由懶加載文件中所有的chunkId組成的數(shù)組土浸。
第二個(gè)元素是由一組函數(shù)組成的數(shù)組。數(shù)組的下標(biāo)代表模塊的moduleId彭羹，對(duì)應(yīng)的值為模塊代碼函數(shù)黄伊。
這個(gè)函數(shù)主要做的事情如下：
1）遍歷參數(shù)中的chunkId：
判斷installedChunks緩存變量中對(duì)應(yīng)chunkId的屬性值：如果是真，說(shuō)明模塊正在加載派殷。
將installedChunks中對(duì)應(yīng)的chunkId置為0还最，標(biāo)識(shí)該模塊已經(jīng)被加載過(guò)了。
2）遍歷參數(shù)中的模塊數(shù)組：
將模塊代碼函數(shù)存儲(chǔ)到modules中愈腾，該modules是入口文件a.js中自執(zhí)行函數(shù)的參數(shù)憋活。
這一步非常關(guān)鍵，因?yàn)閳?zhí)行模塊加載函數(shù)webpack_require時(shí)虱黄，獲取模塊代碼時(shí)悦即，就是通過(guò)moduleId從modules中查找對(duì)應(yīng)模塊代碼。
3）調(diào)用parentJsonpFunction（原生push方法）
將整個(gè)懶加載文件的數(shù)據(jù)存入全局?jǐn)?shù)組變量window.webpackJsonp橱乱。緩存common文件辜梳，以便b.js文件調(diào)用
4）遍歷resolves，執(zhí)行所有promise的resolve：
checkDeferredModules函數(shù)分析
function checkDeferredModules() {
var result;
for(var i = 0; i < deferredModules.length; i++) {
var deferredModule = deferredModules[i];
var fulfilled = true;
for(var j = 1; j < deferredModule.length; j++) {
var depId = deferredModule[j];
if(installedChunks[depId] !== 0) fulfilled = false;
}
if(fulfilled) {
deferredModules.splice(i--, 1);
result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
}
}
return result;
}
deferredModules是一個(gè)數(shù)組泳叠。
deferredModules.push([0,1]);
數(shù)組中第一項(xiàng)是一個(gè)數(shù)組deferredModules作瞄，deferredModule數(shù)組中存儲(chǔ)的是模塊的moduleId。
該函數(shù)的作用是：
獲取該模塊的moduleId危纫，從deferredModule數(shù)組中的第二條數(shù)據(jù)開(kāi)始（第一個(gè)數(shù)據(jù)是當(dāng)前模塊宗挥，后面的數(shù)據(jù)是該模塊的依賴）遍歷，獲取依賴模塊的Id种蝶，installedChunks對(duì)象的key值為當(dāng)前模塊及依賴模塊的ID契耿，value值為相應(yīng)模塊是否加載完成。如果依賴模塊都加載完成螃征，就調(diào)用webpack_require函數(shù)搪桂，傳入當(dāng)前模塊，由當(dāng)前模塊調(diào)用相應(yīng)的依賴模塊盯滚，遞歸加載踢械。
