0
点赞
收藏
分享

微信扫一扫

javascript_webpack

概念

本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。


普通的函数

// ! function (形参){加载器构建}(功能模块)

!function (x,y){
    console.log("x",x)
    console.log("y",y)
}(33, 44)

javascript_webpack_bundle

以数字调度

!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;
    }

    // 调度器调度
    // console.log(n(0))
    console.log(n(1))

}([ function () {
        console.log("f1");
        this.exports = 111;
    },
    function () {
        console.log("f2");
        this.exports = 222;
    }]
);

javascript_webpack_应用程序_02

以哈希调度

// 哈希调度
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;
    }
    window.loader = n

    // 调度器调度
    console.log(n("111"))
    console.log(n("222"))

}(
    {
        "111": function () {
            console.log("f1");
            this.exports = 1;
        },
        "222":
            function () {
                console.log("f2");
                this.exports = 2;
            }
    }
);

// 调度某个函数

console.log(window.loader("111"))
console.log(window.loader("222"))



javascript_webpack_应用程序_03

webpack应用

javascript_webpack_bundle_04

举报

相关推荐

0 条评论