以下分别是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文件是一个立即执行函数，函数中的代码如下：
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）定义了一个全局变量webpackJsonp,将原生方法push改成webpackJsonpCallback方法。
2）将原生push方法备份至parentJsonpFunction。
3）jsonpArray方法存储webpackJsonp中的值。
webpackJsonpCallback函数分析
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();
};
参数：
参数是一个数组，有三个元素
第一个元素由懒加载文件中所有的chunkId组成的数组。
第二个元素是由一组函数组成的数组。数组的下标代表模块的moduleId，对应的值为模块代码函数。
这个函数主要做的事情如下：
1）遍历参数中的chunkId：
判断installedChunks缓存变量中对应chunkId的属性值：如果是真，说明模块正在加载。
将installedChunks中对应的chunkId置为0，标识该模块已经被加载过了。
2）遍历参数中的模块数组：
将模块代码函数存储到modules中，该modules是入口文件a.js中自执行函数的参数。
这一步非常关键，因为执行模块加载函数webpack_require时，获取模块代码时，就是通过moduleId从modules中查找对应模块代码。
3）调用parentJsonpFunction（原生push方法）
将整个懒加载文件的数据存入全局数组变量window.webpackJsonp。缓存common文件，以便b.js文件调用
4）遍历resolves，执行所有promise的resolve：
checkDeferredModules函数分析
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是一个数组。
deferredModules.push([0,1]);
数组中第一项是一个数组deferredModules，deferredModule数组中存储的是模块的moduleId。
该函数的作用是：
获取该模块的moduleId，从deferredModule数组中的第二条数据开始（第一个数据是当前模块，后面的数据是该模块的依赖）遍历，获取依赖模块的Id，installedChunks对象的key值为当前模块及依赖模块的ID，value值为相应模块是否加载完成。如果依赖模块都加载完成，就调用webpack_require函数，传入当前模块，由当前模块调用相应的依赖模块，递归加载。
