Inspetor de Bundle Webpack

O que esta ferramenta verifica

Boa parte da web ainda entrega saída do webpack, e sua estrutura merece ser entendida em seus próprios termos — separada do grafo de dependências geral e agnóstico de bundler que o Visualizador de Dependências de Bundle JS desenha. Esta ferramenta procura especificamente pelas peças de um bundle webpack:

• O bootstrap de runtime — a função no formato __webpack_require__ que todo build webpack traz, detectada pelo mecanismo exato que ela usa para invocar um módulo (modules[moduleId].call(module.exports, module, module.exports, require)), não pela busca do nome literal. Esse mecanismo sobrevive à renomeação completa de identificadores, então ainda funciona em um build onde todos os nomes foram minificados.
• O mapa de módulos — seja na forma clássica de objeto ({0: fn, 1: fn, ...}) ou na forma de array ([fn, fn, ...]) que versões mais novas do webpack usam por padrão.
• Metadados de chunk-push — em builds com divisão de código, a chamada (self.webpackChunkXxx = self.webpackChunkXxx || []).push([[chunkIds], {modules}, runtime]), extraindo o nome e os ids do chunk.
• Auxiliares de runtime — quais entre .m (mapa de módulos), .c (cache de módulos), .d (define getter), .o (hasOwnProperty), .n (getter de export padrão), .s (id do módulo de entrada) e .p (caminho público) estão presentes.

Selecione qualquer módulo na lista para ver seu código real em um painel com realce de sintaxe — sem execução, apenas o texto que o próprio webpack envolveu em torno daquele módulo.

Quando não é webpack

Se nem o runtime nem um mapa de módulos forem encontrados, a ferramenta diz "isto não parece saída do webpack" em vez de forçar um palpite, e adiciona uma dica simples e honesta quando disponível — um comentário //# sourceMappingURL=, ou o fato de o arquivo ser analisado como módulo ES (comum em saídas do Rollup, esbuild e Vite).

Limitação conhecida

Um bundle que passou pelo webpack e depois por uma segunda passagem de minificação mais agressiva que também renomeia os próprios nomes de propriedade do runtime pode escapar da verificação de forma .call() e ser reportado como não-webpack. É uma escolha deliberada: um falso negativo raro é melhor do que inventar um mapa de módulos que não existe de fato.

Privacidade

Tudo roda no seu navegador usando um analisador JavaScript real (acorn). O arquivo que você cola ou envia nunca é enviado a lugar nenhum.