Ich kann anscheinend keine Debug-Option oder kein Plugin im Webpack finden, um zu zeigen, was genau in ein Stück hineingegangen ist.
Warum brauche ich das? Ich habe Fälle gesehen, in denen Code-Aufteilung buchstäblich alles viel größer macht, als alles in einer einzigen Datei zu speichern. Dies ist ein bisschen intuitiv, da ich nicht glaube, dass der Bootstrap-Code von Webpack so bedeutend ist; Ich vermute, dass es Minification / Deduplizierung sein könnte, aber ohne zu wissen, welche Module tatsächlich zusammengeschnitten werden, ist es sehr schwierig, einige isolierte Tests zu bestätigen.
Mein Build-Prozess verwendet Schluck; wenn das einen Unterschied macht.
Sie können ein Plugin schreiben, das dies tut.
Zum Beispiel
%Vor% Weitere Informationen finden Sie auf dieser Seite Ссылка . Es enthält Dokumentation für alle Orte, an denen Sie sich einklinken können. Finde den richtigen Hook, der mit chunks: Chunk[] oder chunk aufgerufen wird, und in diesem kannst du auf alles zugreifen, was du willst.
Außerdem enthält das Statistikobjekt alle post-build Informationen, die Sie jemals benötigen würden. Es ist im done -Plugin verfügbar.
Die Lösung besteht darin, ein Skript zu schreiben, das die .js.map-Dateien analysiert, da sie einen sources -Eintrag enthalten, der verwendet werden kann, um alle Dateien zu erkennen, die im Chunk enthalten waren.
Hier ist ein kleines Skript, das die Arbeit erledigt,
%Vor%Sie müssen das Skript an Ihre eigene Konfiguration anpassen.
Nur für den Fall, dass es nicht offensichtlich ist, liegt der webpack://source-code -Teil an den devtool-Einstellungen in den Einstellungen von webpack output , nämlich:
Die webpack/internal und node_modules stammen aus dem folgenden Normalisierungsskript (ich mag die "~" Ersetzungsfunktion von webpack nicht).
Es scheint, dass der Schlüssel als --display-modules bekannt ist, um alle Module anzuzeigen :
Dann erhalten Sie die Liste der verwendeten Module ähnlich wie folgt:
%Vor%Tags und Links javascript webpack gulp