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

1次阅读

共计 7534 个字符,预计需要花费 19 分钟才能阅读完成。

网上也搜了不少但是没有找到合适的工具
自己尝试看了下代码,如果一点点去看很费劲,但是可以看到一些端倪,比如可以看到 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 = 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  n(5317));
i = n.O(i);
})();}
if (typeof window == "undefined") {return e();
}
window.createPageHandler = e;
})();
正文完
 0