JS之webpack

目录

• 一、认识webpack
  • 1.1 webpack数组形式
  • 1.2 webpackde 对象形式
  • 注意

一、认识webpack#

Webpack是一个现代的静态模块打包工具，它主要用于前端开发中的模块化打包和构建。通过Webpack,开发者可以将多个模块（包括JavaScript、CSS、图片等）进行打包，生成优化后的静态资源文件，以供在浏览器中加载和运行。

Webpack的主要功能和特点包括：

• 1.模块化支持：Webpack将应用程序拆分为多个模块，通过模块化的方式管理和加载依赖关系。它支持CommonJS、ES module、AMD等多种模块化规范，并且能够将这些模块打包成最终的静态资源文件。
• 2.打包和压缩：Webpack可以将多个模块打包成一个或多个最终的静态资源文件。它支持对JavaScript、CSS、图片等资源进行压缩、合并和优化，以减小文件大小，提升加载速度和性能。
• 3.资源加载管理：Webpack可以处理各种类型的资源文件，例如JavaScript、CSS、图片、字体等。通过加载器(Loader)的配置，Webpack可以对这些资源文件进行转换和处理，使其能够被应用程序正确地引用和加载。

webpack的形式

Copy Highlighter-hljs
!function(参数){加载器}([模块1,模块2,.......])
!function(参数){加载器}({"k1":模块1, "k2":模块2,.......})

1.1 webpack数组形式

Copy Highlighter-hljs
!function(e) {
    var t = {};
    // 加载器  所有的模块都是从这个函数加载 执行
    function n(r) {
        if (t[r])
            return t[r].exports;
        var o = t[r] = {
            i: r,
            l: !1,
            exports: {}
        };
        return e[r].call(o.exports, o, o.exports, n),
            o.l = !0,
            o.exports
    }
// 此处的n(0)是内部的调用，我们一般是在外面使用，见下面的代码
// 因为是数组的形式，n()的参数就是数组的索引，0就是第0个索引的数据
    n(0)
}([
        function () {
            console.log('123456')
        },
        function () {
            console.log('模块2')
        },
    ])

我们一般是在外面使用，需要提升一下

Copy Highlighter-hljs
// 具体位置看下面的代码完整版
window=global;
window.loader = n;

代码完整版

Copy Highlighter-hljs
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: {}
        };
        return e[r].call(o.exports, o, o.exports, n),
            o.l = !0,
            o.exports
    }
    window.loader = n;
}([
        function () {
            console.log('123456')
        },
        function () {
            console.log('模块2')
        },
    ])
window.loader(0)
window.loader(1)

1.2 webpackde 对象形式

Copy Highlighter-hljs
!function(e) {
    var t = {};
    //  所有的模块 都是从这个加载器 执行的  分发器
    function n(r) {
        if (t[r])
            return t[r].exports;
        var o = t[r] = {
            i: r,
            l: !1,
            exports: {}
        };
        return e[r].call(o.exports, o, o.exports, n),
        o.l = !0,
        o.exports
    }
   n(1)  // 对象 根据KEY 找模块
}({
        0: function () {
            console.log('我是模块1')
        },
 
        1: function () {
            console.log('我是模块2')
        }
    }
);

同数组形式-我们要在外面使用

Copy Highlighter-hljs
window=global;
window.loader = n;

完整版

Copy Highlighter-hljs
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: {}
        };
        return e[r].call(o.exports, o, o.exports, n),
        o.l = !0,
        o.exports
    }
   window.loader = n;
}({
        "k1": function () {
            console.log('我是模块1')
        },
 
        "k2": function () {
            console.log('我是模块2')
        }
    }
);
 
window.loader("k1");

案例

注意

如果加载器运行的时候，报需要补环境的问题，大概率是因为在加载器里有个初始化
例子

解决办法--将初始化注释掉