JS之webpack

博主： huoyu
发布时间：2025 年 11 月 01 日
3 次浏览
暂无评论
3477字数
分类： js - 逆向

## 一、认识webpack[#](https://www.cnblogs.com/a438842265/p/18320956#739303792)

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

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

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

webpack的形式

```js
!function(参数){加载器}([模块1,模块2,.......])
!function(参数){加载器}({"k1":模块1, "k2":模块2,.......})
```

### 1.1 webpack数组形式

```js
!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')
        },
    ])

```

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

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

代码完整版

```js
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 对象形式

```js
!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')
        }
    }
);
```

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

```js
window=global;
window.loader = n;
```

完整版

```js
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");
```

[案例](https://www.cnblogs.com/a438842265/articles/18320967)

#### 注意

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

![image.png](http://type.zimopy.com/usr/uploads/2025/11/793228536.png)

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

![image.png](http://type.zimopy.com/usr/uploads/2025/11/1739515359.png)

最后修改：2025 年 11 月 01 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱

地址

huoyu1
真的很需要
欣
很牛逼|´・ω・)ノ
hhh
真棒
Hongjia
https://blog.dingtone.me/zh/rec...
Hongjia
https://5sim.net/zh使用该网站可以最低1 卢布充值

JS之webpack

huoyu • 2025 年 11 月 01 日

## 一、认识webpack[#](https://www.cnblogs.com/a438842265/p/18320956#739303792)

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

webpack的形式

```js
!function(参数){加载器}([模块1,模块2,.......])
!function(参数){加载器}({"k1":模块1, "k2":模块2,.......})
```

### 1.1 webpack数组形式

```

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

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

代码完整版

### 1.2 webpackde 对象形式

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

```js
window=global;
window.loader = n;
```

完整版

[案例](https://www.cnblogs.com/a438842265/articles/18320967)

#### 注意

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

![image.png](http://type.zimopy.com/usr/uploads/2025/11/793228536.png)

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

![image.png](http://type.zimopy.com/usr/uploads/2025/11/1739515359.png)

JS之webpack

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

速注册OpenAi（ChatGPT），国内也可以

Frida 代码自动补全

ubuntu 实现内网穿透

最新Fiddler Web Debugger v5.0 20202.18177中文版

关闭雷电模拟器的capture.exe

mac 线刷google系列手机

6.pandas 数据统计函数

python 使用node_vm2执行js

python字符串格式转换之base64/hex/str互转的方法

idea打包spring-boot项目

JS之webpack

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

JS之webpack

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款