Laravel Mix - ein einfacher und leistungsstarker Wrapper um Webpack

Laravel-Mix

Wir werden über Laravel Mix sprechen. Um es besser zu verstehen, werden wir zunächst erklären, was Webpack ist.

Webpack ist ein unglaublich leistungsfähiger Modul-Bundler, der Ihr JavaScript und Ihre Assets für den Browser vorbereitet. Daher ist Mix eine dünne Schicht über Webpack, die dazu dient, Ihre Webpack-Konfiguration dynamisch zu erstellen. Obwohl Laravel Mix ursprünglich für Laravel-Projekte entwickelt wurde, kann es natürlich für jede Art von Anwendung verwendet werden.

Übersicht

Die neueste Version von Laravel Mix ist Version 6 und erfordert Abhängigkeiten, die mit Webpack 5 oder PostCSS 8 kompatibel sind. Es ist ein kostenloses Tool, das Ihre Assets automatisch optimiert und minimiert, wenn Sie sie mit dem Befehl npx mix --production für die Produktion erstellen, über den wir später sprechen werden.

Laravel Mix wird auch mit grundlegender Typescript- und View-Unterstützung ausgeliefert. Zur Unterstützung der langfristigen Zwischenspeicherung bietet Mix die Methode mix.version(). Bei aktivierter Versionierung wird jedes Mal, wenn Ihr Code kompiliert wird, eine eindeutige Query-String-ID an Ihre Assets angehängt, und nach der Kompilierung werden die gehashten Namen in der Datei mix-manifest.json angezeigt. Ein weiterer großer Vorteil der mix-API besteht darin, dass wir Herstellerbibliotheken isolieren oder in eigene Dateien extrahieren können, was natürlich zu einer deutlich kleineren app.js-Datei führt. Mit Hot Module Replacement können wir Module austauschen, hinzufügen oder entfernen, während eine Anwendung läuft, ohne sie komplett neu laden zu müssen. Alles, was wir tun müssen, ist, von der Kommandozeile aus npx mix watch --hot auszuführen, um einen Node-Server zu starten und unser Bundle auf Änderungen zu überwachen.

Mix bietet den Befehl mix.css() für die grundlegende CSS-Kompilierung und das iPostCSS-Plugin-Ökosystem als Teil unserer Kompilierung, und wir haben auch Optionen für die Kompilierung mit Sass und Less. Standardmäßig wird Mix alle unsere CSS durch das beliebte Autoprefixer PostCSS-Plugin leiten. Als solche sind wir frei, die neueste CSS 3-Syntax mit dem Verständnis, dass alle notwendigen Browser-Präfixe werden automatisch angewendet werden, zu verwenden. Ein wichtiges Konzept zu verstehen ist, dass Mix und Webpack wird alle URLs mit relativen Pfaden innerhalb unserer Stylesheets umschreiben, aber die absolute Pfade werden immer von URL Rewriting ausgeschlossen werden.

Installationsschritte

Hier sehen wir, wie man Laravel Mix installiert und einrichtet.

Zuerst sollten wir Mix entweder über npm oder yarn installieren.

npm install laravel-mix --save-dev

yarn add laravel-mix

Der zweite Schritt besteht darin, eine Mix-Konfigurationsdatei namens webpack.mix.js zu erstellen

webpack.mix.js berühren

Dann definieren wir dort unsere Kompilierung. In diesem Beispiel legen wir unseren öffentlichen Pfad fest und verwenden die mix sass-Kompilierung.

const mix = require('laravel-mix');
mix.setPublicPath(`dist`);
mix.sass('resources/scss/app.scss', `dist/css`);
mix.js('resources/js/app.js', 'dist/js')

Schließlich müssen wir nur noch einen npx mix-Befehl ausführen, um den entsprechenden Webpack-Build auszulösen.

Nützliche CLI-Befehle

• Kompilieren in einer lokalen Umgebung

  npm-Mix

• Assets auf Veränderungen überwachen

  npx mix uhr

• Abfrage

  npx mix watch--watch-options-poll

• Austausch des Heißmoduls

  npx mix watch --hot

• Kompilieren für die Produktion

  npx mix --production

• Anpassen des Mix-Konfigurationspfads

  npx mix --mix-config=build/webpack.mix.js -production

Nützliche Merkmale

• Mix bietet einige andere nützliche Funktionen, zum Beispiel, wenn wir Anbieterbibliotheken haben, die von unserem Kern-Webpack-Bündel getrennt bleiben müssen, können wir mix.combine() verwenden, um mehrere Dateien in eine einzige Datei mit dem Namen merged.js zusammenzuführen oder zu verketten.
• Eine weitere interessante Funktion ist browsersync, die unsere Dateien automatisch auf Änderungen überwacht und alle Änderungen in den Browser überträgt, ohne dass eine manuelle Aktualisierung erforderlich ist.
• In bestimmten Fällen kann es sich als einfacher erweisen, eine Ebene tiefer zu gehen und die unterstrichene Webpack-Konfiguration direkt zu überschreiben, und mix bietet den mix.webpackConfig()-Befehl, um dies zu ermöglichen.
• Schauen wir uns nun die Ereignis-Hooks an. In einigen Szenarien kann es notwendig sein, ein Stück Logik auszuführen, bevor die Kompilierung beginnt. Wenn wir zum Beispiel ein Verzeichnis kopieren oder eine Datei verschieben müssen, ermöglicht die mix.before() Funktion dies, und Mix beginnt erst mit der Kompilierung, wenn alle Hooks vollständig aufgelöst wurden. Auf der anderen Seite können wir ein Stück Logik ausführen, nachdem Webpack seine Kompilierung mit der mix.after() Methode abgeschlossen hat. Zum Beispiel, wenn man eine Liste aller kompilierten Assets protokollieren möchte.

Für weitere Informationen können Sie die offizielle Dokumentation von Laravel Mix besuchen.