V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
me15000
V2EX  ›  程序员

怎么把 webpack 打包了的文件还原出 HTML/css/js 逻辑代码来?

  •  
  •   me15000 · 98 天前 · 1537 次点击
    这是一个创建于 98 天前的主题,其中的信息可能已经有所发展或是发生改变。

    网上也搜了不少但是没有找到合适的工具 自己尝试看了下代码,如果一点点去看很费劲,但是可以看到一些端倪,比如可以看到 css 的定义如下:

    			".settings": {
                    flexDirection: "column"
                  },
                  ".settings .wrapper": {
                    flexDirection: "column",
                    backgroundColor: "#ffffff",
                    paddingTop: "0px",
                    paddingRight: "30px",
                    paddingBottom: "0px",
                    paddingLeft: "30px",
                    borderBottomWidth: "16px",
                    borderBottomStyle: "solid",
                    borderBottomColor: "#F8F8F8",
                    _meta: {
                      ruleDef: [{
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "settings"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "wrapper"
                      }]
                    }
                  },
    

    那么问题是有没有已经造好了的轮子、工具,可以方便一些把这些代码剥离出来,最终翻译为 css 和 html 代码呢?

    完整代码如下:

    (function () {
        function e() {
          return (() => {
            var e = Object.getPrototypeOf(global) || global;
            e.chunkFileMap = e.chunkFileMap || {
              881: "node_modules/crypto-js/cipher-core.js",
              5624: "node_modules/crypto-js/core.js",
              8160: "node_modules/crypto-js/md5.js",
              5613: "node_modules/crypto-js/aes.js",
              2468: "node_modules/crypto-js/evpkdf.js",
              136: "node_modules/crypto-js/enc-base64.js",
              3139: "node_modules/crypto-js/hmac.js",
              9092: "node_modules/crypto-js/sha1.js",
              2120: "node_modules/crypto-js/pad-pkcs7.js",
              345: "node_modules/crypto-js/enc-utf8.js",
              8183: "node_modules/dayjs/dayjs.min.js",
              5634: "node_modules/dayjs/plugin/isoWeek.js",
              3716: "node_modules/ylh-quick-app-ad-sdk/utils/index.js",
              1944: "node_modules/union-quick-app-ad/components/common.js",
              6700: "manifest.js",
              5100: "cmps/em-request/index.js",
              3375: "cmps/em-request/device.js",
              3314: "cmps/em-request/extend.js",
              8006: "utils/object.js",
              2172: "global.js",
              2858: "utils/store.js",
              8789: "utils/encipher.js",
              1552: "cmps/em-spin/index.js",
              4519: "services/taskConf.js",
              942: "utils/delay.js",
              1877: "services/adConfPlus.js",
              7285: "services/adConf.js",
              6494: "cmps/em-popup-window/index.js",
              1198: "cmps/em-exit-btn/index.js",
              2694: "services/balance.js",
              7258: "utils/device.js",
              267: "cmps/em-complain/index.js",
              8182: "cmps/em-tabbar/index.js",
              2850: "cmps/em-loading/index.js",
              9160: "utils/re-date-fns.js",
              8831: "cmps/em-withdraw/switch-list/switch.js",
              7634: "cmps/em-withdraw/switch-list/index.js",
              9318: "onents/icon/icons.js",
              2714: "onents/icon/index.js",
              8475: "services/reportAdInfo.js",
              3979: "utils/network.js",
              6425: "la.js"
            };
            var t;
            var s = {
              1863: e => {
                e.exports = function (e, t, s) {
                  "use strict";
      
                  Object.defineProperty(t, "__esModule", {
                    value: true
                  });
                  t.default = undefined;
                  n(s("@app-module/system.prompt"));
                  var a = n(s("@app-module/system.webview"));
                  function n(e) {
                    if (e && e.__esModule) {
                      return e;
                    } else {
                      return {
                        default: e
                      };
                    }
                  }
                  const {
                    post: i
                  } = request;
                  t.default = {
                    data: () => ({
                      aboutConfig: []
                    }),
                    computed: {
                      versionName() {
                        const {
                          versionName: e,
                          template: t,
                          name: s
                        } = $manifest;
                        return e;
                      }
                    },
                    async onInit() {
                      const {
                        tabbar: e
                      } = $manifest;
                      let {
                        data: t
                      } = await request.get(`https://xxxxx?pkg=${$manifest.package}&brand=huawei&position=relate`);
                      this.aboutConfig = t.menus;
                    },
                    onSuspendClick() {
                      this.isPermanentlySuspendWindowShow = true;
                    },
                    onReady() {},
                    onClearCacheClick() {
                      this.isClearCacheWindowShow = true;
                    },
                    onAgreementTap() {
                      a.default.loadUrl({
                        url: this.$app.$def.agreementUrl
                      });
                    },
                    onPrivacyClick() {
                      a.default.loadUrl({
                        url: this.$app.$def.privacyUrl
                      });
                    },
                    gotoWeb(e) {
                      if (e) {
                        a.default.loadUrl({
                          url: e
                        });
                      }
                    },
                    onDestroy() {}
                  };
                  const o = t.default || e.exports;
                  const r = ["public", "protected", "private"];
                  if (o.data && r.some(function (e) {
                    return o[e];
                  })) {
                    throw new Error("页面 VM 对象中的属性 data 不可与\"" + r.join(",") + "\"同时存在,请使用 private 替换 data 名称");
                  }
                  if (!o.data) {
                    o.data = {};
                    o._descriptor = {};
                    r.forEach(function (e) {
                      const t = typeof o[e];
                      if (t === "object") {
                        o.data = Object.assign(o.data, o[e]);
                        for (const t in o[e]) {
                          o._descriptor[t] = {
                            access: e
                          };
                        }
                      }
                    });
                  }
                };
              },
              6092: e => {
                e.exports = {
                  ".settings": {
                    flexDirection: "column"
                  },
                  ".settings .wrapper": {
                    flexDirection: "column",
                    backgroundColor: "#ffffff",
                    paddingTop: "0px",
                    paddingRight: "30px",
                    paddingBottom: "0px",
                    paddingLeft: "30px",
                    borderBottomWidth: "16px",
                    borderBottomStyle: "solid",
                    borderBottomColor: "#F8F8F8",
                    _meta: {
                      ruleDef: [{
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "settings"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "wrapper"
                      }]
                    }
                  },
                  ".settings .wrapper .list": {
                    width: "100%",
                    height: "120px",
                    alignItems: "center",
                    justifyContent: "space-between",
                    borderBottomWidth: "1px",
                    borderBottomStyle: "solid",
                    borderBottomColor: "rgba(0,0,0,0.06)",
                    _meta: {
                      ruleDef: [{
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "settings"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "wrapper"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "list"
                      }]
                    }
                  },
                  ".settings .wrapper .list-l": {
                    fontSize: "30px",
                    color: "#333333",
                    _meta: {
                      ruleDef: [{
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "settings"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "wrapper"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "list-l"
                      }]
                    }
                  },
                  ".settings .wrapper .list .clearstorge": {
                    width: "43px",
                    height: "43px",
                    _meta: {
                      ruleDef: [{
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "settings"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "wrapper"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "list"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "clearstorge"
                      }]
                    }
                  },
                  ".settings .wrapper .list .more": {
                    width: "30px",
                    height: "30px",
                    _meta: {
                      ruleDef: [{
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "settings"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "wrapper"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "list"
                      }, {
                        t: "d"
                      }, {
                        t: "a",
                        n: "class",
                        i: false,
                        a: "element",
                        v: "more"
                      }]
                    }
                  }
                };
              },
              287: e => {
                e.exports = {
                  type: "div",
                  attr: {},
                  classList: ["settings"],
                  children: [{
                    type: "div",
                    attr: {},
                    classList: ["wrapper"],
                    children: [{
                      type: "div",
                      attr: {},
                      classList: ["list"],
                      children: [{
                        type: "text",
                        attr: {
                          value: "当前版本"
                        },
                        classList: ["list-l"]
                      }, {
                        type: "text",
                        attr: {
                          value: function () {
                            return "V" + this.versionName;
                          }
                        }
                      }]
                    }, {
                      type: "div",
                      attr: {},
                      classList: ["list"],
                      events: {
                        click: "onAgreementTap"
                      },
                      children: [{
                        type: "text",
                        attr: {
                          value: "用户协议"
                        },
                        classList: ["list-l"]
                      }, {
                        type: "image",
                        attr: {
                          src: "https://xxxxx/qa/common/mine/tianjinchangdu/right.png"
                        }
                      }]
                    }, {
                      type: "div",
                      attr: {},
                      classList: ["list"],
                      events: {
                        click: "onPrivacyClick"
                      },
                      children: [{
                        type: "text",
                        attr: {
                          value: "隐私政策"
                        },
                        classList: ["list-l"]
                      }, {
                        type: "image",
                        attr: {
                          src: "https://xxxxx/qa/common/mine/tianjinchangdu/right.png"
                        }
                      }]
                    }, {
                      type: "div",
                      attr: {},
                      classList: ["list"],
                      events: {
                        click: function (e) {
                          return this.gotoWeb(this.ls.like, e);
                        }
                      },
                      repeat: {
                        exp: function () {
                          return this.aboutConfig;
                        },
                        value: "ls"
                      },
                      children: [{
                        type: "text",
                        attr: {
                          value: function () {
                            return this.ls.title;
                          }
                        },
                        classList: ["list-l"]
                      }, {
                        type: "image",
                        attr: {
                          src: "https://xxxx/qa/common/mine/tianjinchangdu/right.png"
                        },
                        shown: function () {
                          return this.ls.like;
                        }
                      }]
                    }]
                  }]
                };
              },
              5317: (e, t, s, a, n, i, o) => {
                s(6012);
                s(8417);
                s(2342);
                var r = s(6092);
                var l = s(1863);
                a("@app-component/index", [], function (e, t, a) {
                  l(a, t, e);
                  if (t.__esModule && t.default) {
                    a.exports = t.default;
                  }
                  a.exports.template = s(287);
                  a.exports.style = r;
                });
                n("@app-component/index", {
                  packagerVersion: undefined
                });
              }
            };
            var a = {};
            function n(e) {
              var t = a[e];
              if (t !== undefined) {
                return t.exports;
              }
              var i = a[e] = {
                exports: {}
              };
              s[e].call(i.exports, i, i.exports, n, $app_define$, $app_bootstrap$, $app_require$, $app_define_wrap$);
              return i.exports;
            }
            n.m = s;
            t = [];
            n.O = (s, a, i, o) => {
              if (!a) {
                var r = Infinity;
                for (d = 0; d < t.length; d++) {
                  for (var [a, i, o] = t[d], l = true, p = 0; p < a.length; p++) {
                    if ((o & false || r >= o) && Object.keys(n.O).every(e => n.O[e](a[p]))) {
                      a.splice(p--, 1);
                    } else {
                      l = false;
                      $app_evaluate$(`${e.chunkFileMap[a[p]]}`);
                      if (o < r) {
                        r = o;
                      }
                    }
                  }
                  if (l) {
                    t.splice(d--, 1);
                    var c = i();
                    if (c !== undefined) {
                      s = c;
                    }
                  }
                }
                return s;
              }
              o = o || 0;
              for (var d = t.length; d > 0 && t[d - 1][2] > o; d--) {
                t[d] = t[d - 1];
              }
              t[d] = [a, i, o];
            };
            n.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t);
            (() => {
              var t = {
                6638: 0
              };
              n.O.j = e => t[e] === 0;
              var s = (e, s) => {
                var a;
                var i;
                var [o, r, l] = s;
                var p = 0;
                if (o.some(e => t[e] !== 0)) {
                  for (a in r) {
                    if (n.o(r, a)) {
                      n.m[a] = r[a];
                    }
                  }
                  if (l) {
                    var c = l(n);
                  }
                }
                for (e && e(s); p < o.length; p++) {
                  i = o[p];
                  if (n.o(t, i) && t[i]) {
                    t[i][0]();
                  }
                  t[i] = 0;
                }
                return n.O(c);
              };
              var a = e.webpackChunkcom_huawei_quick = e.webpackChunkcom_huawei_quick || [];
              a.forEach(s.bind(null, 0));
              a.push = s.bind(null, a.push.bind(a));
            })();
            var i = n.O(undefined, [1552, 6494, 8831, 7634], () => n(5317));
            i = n.O(i);
          })();
        }
        if (typeof window == "undefined") {
          return e();
        }
        window.createPageHandler = e;
      })();
    
    5 条回复    2024-09-15 19:35:55 +08:00
    EndlessMemory
        1
    EndlessMemory  
       98 天前
    这能还原吗?很难吧
    bnrwnjyw
        2
    bnrwnjyw  
       98 天前
    咋想的,没了上下文怎么还原?
    一堆无意义的 a,b,c,d 怎么可能还原成有意义的变量?
    needpp
        3
    needpp  
       98 天前
    别想了,这样不能还原。
    flyqie
        4
    flyqie  
       98 天前 via Android
    想多了。。自己人力重写吧。

    没 sourcemap 不要想着逆向出来项目源码,洗洗睡就可以了。

    真要是能直接拆出来你说的这种项目源码,那业界怕不是都得疯。。
    DOLLOR
        5
    DOLLOR  
       98 天前
    看到又是 app-module 又是 app-component 的,估计还是用 angular 写的。
    这可不是 jquery 那种随随便便就让你看到代码“原本的样子”的时代了。🐶
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1065 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 18:09 · PVG 02:09 · LAX 10:09 · JFK 13:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.