Webpack

流程

1. 找加载器对应的文件

2. 注释初始化动作，补环境

3. 全局调用加载器函数

4. 打上执行模块日志

基于数组的模式

window = global

!function (e) {
    var t = {};

    // 加载器函数，完成某个功能模块的调度
    function n(r) {
        if (t[r])
            return t[r].exports;
        var o = t[r] = {
            i: r,
            l: !1,
            exports: {}
        };
        e[r].call(o.exports, o, o.exports, n);
        return o.exports.exports;
    }

    // loader_xxx = n
    window.loader = n

    // 内部
    // console.log(n(0))
}(
    [
        function () {
            console.log("foo");

            this.exports = 100;
        },
        function () {
            console.log("bar");

            function apple() {
                console.log("apple...")
            }

            this.exports = apple;
        }
    ]
);
// console.log(n(1))
// console.log(loader_xxx(1))
console.log(window.loader(1))

基于对象的模式

window = global

!function (e) {
    var t = {};

    function n(r) {
        if (t[r])
            return t[r].exports;
        var o = t[r] = {
            i: r,
            l: !1,
            exports: {}
        };

        console.log("r:::", r)
        e[r].call(o.exports, o, o.exports, n);
        return o.exports.exports; // 返回 o.exports.exports，而不是整个 o.exports 对象
    }

    window.loader = n

    // console.log(n("1003"));
}(
    {
        "1001": function () {
            console.log("foo");
            this.exports = 100; // 直接修改 exports 变量
        },
        "1002": function () {
            console.log("bar");
            window.loader("1001")
            this.exports = 200;
        },
        "1003": function () {
            console.log("atr");
            console.log(document.cookie)
            console.log(screen.width)

            this.exports = 300;
        }
    });

window.loader("1002")