Was ist Webpack?

Webpack ist ein Modul-Bundler für die größten einseitigen Webanwendungen, der mit einem separaten Task-Runner gebündelt werden kann, der JavaScript, CSS und mehr verarbeiten kann. Webpack ist eine großartige Ergänzung zum Toolset eines Front-End-Entwicklers. Mit Webpack ist die Webentwicklung schneller, effizienter und macht mehr Spaß.

Was ist ein Modul-Bundler?

In den meisten Programmiersprachen können wir den Code in mehrere Dateien aufteilen und diese Dateien in die Anwendung importieren, um die darin enthaltene Funktionalität zu nutzen. Dies ist nicht in den Browser integriert, daher stellen Modul-Bundler diese Funktionalität in verschiedenen Formen bereit: durch asynchrones Laden von Modulen und deren Ausführung nach dem Laden oder durch Kombinieren aller erforderlichen Dateien in einer einzigen JavaScript-Datei, die über das geladen wird in HTML.

Ohne Modullader und Bundler könnten wir Dateien immer manuell kombinieren oder HTML in unzählige -Tags laden, aber das hat mehrere Nachteile:

1. Wir müssen die richtige Reihenfolge im Auge behalten, in der die Dateien geladen werden sollen, einschließlich der Abhängigkeit der Dateien von welchen anderen Dateien, und sicherstellen, dass wir keine Dateien einschließen, die wir nicht benötigen.

2. Mehrere -Tags bedeuten mehrere Aufrufe an den Server, um den gesamten Code zu laden, was sich negativ auf die Leistung auswirkt.

3. Erfordert viel manuelle Arbeit, anstatt den Computer dies für Sie erledigen zu lassen.

Warum Webpack wählen?

Wählen Sie Webpack aus folgenden Gründen:

1. Es ist relativ neu, weil es die Mängel und Probleme seiner Vorgänger lösen oder vermeiden kann.

2. Der Einstieg ist einfach. Wenn wir nur eine Reihe von JavaScript-Dateien ohne weiteren Schnickschnack bündeln möchten, benötigen wir nicht einmal eine Konfigurationsdatei.

3. Sein Plug-in-System ermöglicht ihm mehr und macht ihn sehr leistungsstark. Es ist also wahrscheinlich das einzige Build-Tool, das wir brauchen.

Webpack-Ausführungsprozess

Webpack beginnt mit der Arbeit ab Einträgen, normalerweise sind dies JavaScript-Module, in denen Webpack startet sein Durchlaufprozess. Während dieses Prozesses wertet Webpack Eintragsübereinstimmungen anhand von Loader-Konfigurationen aus, die Webpack mitteilen, wie jede Übereinstimmung umgewandelt werden soll.

Parsing-Prozess

Der Eintrag selbst ist ein Modul. Wenn Webpack auf einen Eintrag stößt, versucht Webpack, den Eintrag mithilfe der Auflösungskonfiguration des Eintrags dem Dateisystem zuzuordnen. Zusätzlich zu node_modules können wir Webpack auch anweisen, Suchvorgänge in bestimmten Verzeichnissen durchzuführen. Es ist auch möglich, anzupassen, wie Webpack Dateierweiterungen abgleicht, und es können spezifische Aliase für Verzeichnisse definiert werden. Das Kapitel „Abreicherung und Verpackung“ behandelt diese Ideen ausführlicher.

Wenn das Parsen fehlschlägt, löst das Webpack einen Laufzeitfehler aus. Wenn es Webpack gelingt, die Datei korrekt zu analysieren, führt Webpack die Verarbeitung der passenden Datei gemäß der Loader-Definition durch. Jeder Loader wendet bestimmte Transformationen auf Modulinhalte an.

Wie der Loader geparste Dateien abgleicht, kann auf verschiedene Weise konfiguriert werden, einschließlich Dateityp und Speicherort im Dateisystem. Die Flexibilität von Webpack ermöglicht es uns sogar, spezifische Transformationen auf Dateien anzuwenden, je nachdem, wo sie in das Projekt importiert werden.

Führen Sie den gleichen Analysevorgang für den Loader des Webpacks durch. Mit Webpack können wir eine ähnliche Logik anwenden, wenn wir bestimmen, welcher Loader verwendet werden soll. Aus diesem Grund hat der Loader bereits seine eigene Konfiguration geparst. Wenn Webpack keine Loader-Suche durchführen kann, wird ein Laufzeitfehler ausgegeben.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.