Tiny Online Tools
このツールが確認すること
ウェブの多くはいまだにwebpack出力を配信しており、その構造は単独で理解する価値があります——JSバンドル依存関係ビジュアライザーが描く、バンドラーに依存しない一般的な依存関係グラフとは別に。このツールはwebpackバンドルの構成要素を特に探します。
- ランタイムブートストラップ — すべてのwebpackビルドが持つ
__webpack_require__形状の関数で、モジュールを呼び出す正確な仕組み(modules[moduleId].call(module.exports, module, module.exports, require))によって検出します。文字通りの名前を探すわけではありません。この仕組みは識別子が完全にリネームされても残るため、すべての名前が圧縮されたビルドでも一致します。 - モジュールマップ — 古典的なオブジェクト形式(
{0: fn, 1: fn, ...})、または新しいwebpackバージョンが標準で使う配列形式([fn, fn, ...])のどちらか。 - chunk-pushメタデータ — コード分割されたビルドの場合、
(self.webpackChunkXxx = self.webpackChunkXxx || []).push([[chunkIds], {modules}, runtime])呼び出しから、チャンク名とIDを抽出します。 - ランタイムヘルパー —
.m(モジュールマップ)、.c(モジュールキャッシュ)、.d(define getter)、.o(hasOwnProperty)、.n(デフォルトエクスポートgetter)、.s(エントリーモジュールID)、.p(公開パス)のどれが存在するか。
リストから任意のモジュールを選ぶと、構文ハイライト付きパネルで実際のソースを確認できます——何も実行せず、webpack自身がそのモジュールの周りに巻いたテキストそのものです。
webpackでない場合
ランタイムもモジュールマップも見つからない場合、ツールは推測を強行せず**「これはwebpack出力には見えません」**と伝え、可能であれば手軽で正直なヒントを添えます——//# sourceMappingURL=コメントの存在、またはファイルがESモジュールとして解析されること(Rollup、esbuild、Vite出力によく見られます)。
既知の制限
webpackを通した後、ランタイム自身のプロパティ名までリネームするような、より積極的な2回目の圧縮を経たバンドルは、.call()形状チェックをすり抜けて非webpackと報告される場合があります。これは意図的なトレードオフです——実際には存在しないモジュールマップを捏造するより、まれな見逃しの方が良いという判断です。
プライバシー
すべては実際のJavaScriptパーサー(acorn)によってブラウザ内で処理されます。貼り付けまたはアップロードしたファイルがどこかに送信されることはありません。