webpack提取公共文件

以下分别是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函数，传入当前模块，由当前模块调用相应的依赖模块，递归加载。