[gadget] 自动化扣取webpack V2版本

最新推荐文章于 2024-11-30 10:34:13 发布

Sping__

最新推荐文章于 2024-11-30 10:34:13 发布

阅读量1.3k

点赞数 23

文章标签：爬虫 python webpack node.js

本文链接：https://blog.youkuaiyun.com/weixin_46874932/article/details/134855914

版权

声明

本文章中所有内容仅供学习交流使用，不用于其他任何目的，不提供完整代码，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！
本文章未经许可禁止转载，禁止任何修改后二次传播，擅自使用本文讲解的技术而导致的任何意外，作者均不负责，若有侵权，请联系作者立即删除！

前言

因为webpack模块有两种存储方式，遇到了列表那种，搜索是找不到了模块的位置，需要一个个的去命令行里面去打印出来，比较繁琐、使用来记录一下

渔滒 / webpack_ast · GitCode

本篇文章围绕着渔佬写的脚本开展研究、脚本的作用就是把全部的模块保存在集合中

[gadget] 半自动化扣取webpack

在上面篇文章那边是去除webpack是没有用上的模块

实现步骤

webpack格式

1、模块在集合里面

!function (e) {
  var h = {};
  function f(n) {
    if (h[n]) return h[n].exports;
    var u = h[n] = {
      i: n,
      l: !1,
      exports: {}
    };
    return e[n].call(u.exports, u, u.exports, f), u.l = !0, u.exports;
  }
  f('01');
}({
  '01': function () {
    console.log("01");
  },
  '02': function () {
    console.log("02");
  }
});

2、模块在数组里面


!function (e){
    var h = {};
    function f(n){
    if(h[n])
        return h[n].exports;
    var u=h[n]={
        i:n,
        l:!1,
        exports:{}
    };
    return e[n].call(u.exports,u,u.exports,f),
        u.l=!0,
        u.exports
    }
    f(0)
}([
    function (){
        console.log("01")
    },
    function (){
        console.log("02")

    },
])

AST脚本

1、使用命令行的方式

node webpack_mixer.txt -l runtime.62249a5.js -m app.597640f.js -o webout.js

2、参数说明

-l 加载器的js路径

加载器的js特征：

1.以自执行函数开头

2.定义导出函数，类似 return e[n].call(r.exports, r, r.exports, d), r.l = !0, r.exports

3.为导出函数添加多个方法，类似d.e，d.m，d.n等等

-m 函数模块的js路径

函数模块的js特征：

1.一般以(window.webpackJsonp开头

-o 输入结果的js路径

实践操作

1、集合格式--webpack

需要把加载器和模块分别拆开出来分为两个JS文件

加载器

// auth.js
!function (e){
    var h = {};
    function f(n){
    if(h[n])
        return h[n].exports;
    var u=h[n]={
        i:n,
        l:!1,
        exports:{}
    };
    return e[n].call(u.exports,u,u.exports,f),
        u.l=!0,
        u.exports
    }
  f('01')

}({

})

模块

//mixer.js
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["auth"], {
     '01':function (){
                console.log("01")
    },
    '02':function (){
                console.log("02")
    },
}]);

在命令行里面运行以下的命令

node webpack_mixer.js -l auth.js -m mixer.js -o webpack_out.js

#如果有多的模块文件可这样写

node webpack_mixer.js -l auth.js -m mixer.js -m mixer1.js -o webpack_out.js

weboack_out.js内容就是

// webpack.js
!function (e) {
  var h = {};
  function f(n) {
    if (h[n]) return h[n].exports;
    var u = h[n] = {
      i: n,
      l: !1,
      exports: {}
    };
    return e[n].call(u.exports, u, u.exports, f), u.l = !0, u.exports;
  }
  f('01');
}({
  '01': function () {
    console.log("01");
  },
  '02': function () {
    console.log("02");
  }
});

2、数组格式--webpack

数组格式就只需要一个JS文件即可、脚本会给数组前面加上键，然后变集合格式

//app.js
!function (e){
    var h = {};
    function f(n){
    if(h[n])
        return h[n].exports;
    var u=h[n]={
        i:n,
        l:!1,
        exports:{}
    };
    return e[n].call(u.exports,u,u.exports,f),
        u.l=!0,
        u.exports
    }
    f(0)
}([
    function (){
        console.log("01")
    },
    function (){
        console.log("02")

    },
])

在命令行里面运行以下的命令

node webpack_mixer.js -l app.js -o webpack_out.js

weboack_out.js内容就是

// webpack.js
!function (e) {
  var h = {};
  function f(n) {
    if (h[n]) return h[n].exports;
    var u = h[n] = {
      i: n,
      l: !1,
      exports: {}
    };
    return e[n].call(u.exports, u, u.exports, f), u.l = !0, u.exports;
  }
  f('01');
}({
  '01': function () {
    console.log("01");
  },
  '02': function () {
    console.log("02");
  }
});