Tiny Online Tools
Was dieses Tool prüft
Ein großer Teil des Webs liefert weiterhin webpack-Output aus, und dessen Struktur verdient es, für sich verstanden zu werden — getrennt vom allgemeinen, bundler-unabhängigen Abhängigkeitsgraphen, den der JS-Bundle-Abhängigkeits-Visualisierer zeichnet. Dieses Tool sucht gezielt nach den Bestandteilen eines webpack-Bundles:
- Der Runtime-Bootstrap — die
__webpack_require__-förmige Funktion, die jeder webpack-Build mitbringt, erkannt am genauen Mechanismus, mit dem sie ein Modul aufruft (modules[moduleId].call(module.exports, module, module.exports, require)), nicht durch Suche nach dem wörtlichen Namen. Dieser Mechanismus übersteht vollständige Umbenennung von Bezeichnern und erkennt daher auch einen Build, bei dem alle Namen minifiziert wurden. - Die Modulkarte — entweder in der klassischen Objektform (
{0: fn, 1: fn, ...}) oder in der Array-Form ([fn, fn, ...]), die neuere webpack-Versionen standardmäßig verwenden. - chunk-push-Metadaten — bei Builds mit Code-Splitting der Aufruf
(self.webpackChunkXxx = self.webpackChunkXxx || []).push([[chunkIds], {modules}, runtime]), aus dem Chunk-Name und -IDs extrahiert werden. - Runtime-Helfer — welche von
.m(Modulkarte),.c(Modul-Cache),.d(Define-Getter),.o(hasOwnProperty),.n(Default-Export-Getter),.s(Einstiegsmodul-ID) und.p(öffentlicher Pfad) vorhanden sind.
Modul in der Liste auswählen, um seinen echten Quelltext in einem Panel mit Syntaxhervorhebung zu sehen — ohne Ausführung, nur der Text, den webpack selbst um dieses Modul gelegt hat.
Wenn es kein webpack ist
Werden weder Runtime noch Modulkarte gefunden, sagt das Tool „das sieht nicht nach webpack-Output aus", statt eine Vermutung zu erzwingen, und ergänzt einen günstigen, ehrlichen Hinweis, wenn einer verfügbar ist — ein //# sourceMappingURL=-Kommentar, oder dass die Datei als ES-Modul geparst wird (üblich bei Rollup-, esbuild- und Vite-Output).
Bekannte Einschränkung
Ein Bundle, das webpack durchlaufen hat und danach einen zweiten, aggressiveren Minifizierungsdurchgang, der auch die Eigenschaftsnamen der Runtime selbst umbenennt, kann an der .call()-Formprüfung vorbeirutschen und als nicht-webpack gemeldet werden. Das ist ein bewusster Kompromiss: ein seltenes falsches Negativ ist besser, als eine Modulkarte zu erfinden, die es gar nicht gibt.
Datenschutz
Alles läuft im Browser über einen echten JavaScript-Parser (acorn). Die eingefügte oder hochgeladene Datei wird niemals irgendwohin gesendet.