Startseite » Web Development » Laravel Tools für WordPress: Webpack in elegant mit Laravel Mix 6

Laravel Tools für WordPress: Webpack in elegant mit Laravel Mix 6

Johannes 20. Januar 2021

In der kleinen Serie zu Laravel Tools für WordPress, habe ich euch bereits Laravel Valet für die lokale Entwicklungsumgebung vorgestellt. Heute geht es wieder um ein Tool, was euch bei der Entwicklung von Themes & Plugins helfen kann. Besonders, wenn ihr an Block Editor (Gutenberg) Blöcken schraubt.

Laravel Mix vereinfacht euch die Arbeit mit Webpack enorm und spätestens, wenn ihr euren ersten Block in JavaScript programmiert, kommt ihr nicht mehr an Webpack (oder einem anderen JavaScript-Modul-Packer) vorbei. Die Konfiguration von Webpack empfinde ich aber als sehr kompliziert. Vor allem, wenn man noch nie mit React gearbeitet hat. Laravel Mix nimmt euch die Konfiguration in 80% der Fälle ab und reduziert den Konfigurationsaufwand extrem.

Update

Mit Laravel Mix 6 gab es einige Breaking Changes an der API. Ich habe den Artikel entsprechend geupdated.

Laravel Mix 6 setzt PostCSS 8 voraus. Wenn ihr von einer früheren Version upgraded, stellt erst sicher, dass alle Packages mit PostCSS 8 kompatibel sind.

Beispiel: Die webpack.config.js vom Gutenberg Plugin umfasst 157 Zeilen. Mit Laravel Mix reichen euch die folgenden zwei Zeilen in der webpack.mix.js:

let mix = require('laravel-mix');
mix.js('blocks/myblock.js', 'dist/').react();Code-Sprache: JavaScript (javascript)

Installation

Laravel Mix könnt ihr genau wie Webpack und alle anderen Module/Abhängigkeiten über NPM installieren. Solltet ihr NPM noch nicht in eurem Plugin/Theme initialisiert haben, müsst ihr das zuerst erledigen.

Wechselt dazu im Terminal/Konsole in euer Plugin/Theme Verzeichnis und führt npm init -y aus. Anschließend habt ihr eine package.json Datei in eurem Verzeichnis.

Als nächstes installiert ihr Laravel Mix als Abhängigkeit: npm install laravel-mix --save-dev

Anschließend müsst ihr im Root-Verzeichnis die Laravel Mix-Konfigurationsdatei anlegen. Erstellt einfach eine leere Datei mit dem Namen webpack.mix.js z.B. mit dem Befehl:

touch webpack.mix.jsCode-Sprache: Bash (bash)

Inhaltlich ist nur wichtig, dass ihr laravel-mix required und das Objekt mix für die weitere Konfiguration zur Verfügung steht.

// webpack.mix.js

let mix = require('laravel-mix');

mix.js('src/app.js', 'dist').sass('src/app.scss', 'dist/');
Code-Sprache: JavaScript (javascript)

Das Beispiel mix.js('src/app.js', 'dist/').sass('src/app.scss', 'dist/'); kompiliert die app.js Datei im Ordner src und gibt sie im Ordner dist als app.js wieder aus und macht das gleiche mit der SASS-Datei app.scss, die als Stylesheet app.css ausgegeben wird.

Um euch lange webpack-Befehle in der Konsole zu sparen, solltet ihr in eurer package.json noch folgende scripts ergänzen:

"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production",
    "prod": "npm run production"
}Code-Sprache: JSON / JSON mit Kommentaren (json)

Anschließend könnt ihr einfach npm run watch starten und Webpack kompiliert euer JavaScript/CSS sofort neu, wenn ihr beim Entwickeln etwas an einer Datei ändert und speichert. Zum Schluss kompiliert euch Webpack mit npm run prod eurer fertiges JavaScript/CSS, was ihr an eure Nutzer ausliefern könnt.

Block kompilieren

Entscheidend ist immer, was ihr als Funktion verwendet. Da Gutenberg auf React basiert, können wir unseren Block mit der mix.react Funktion kompilieren:

let mix = require('laravel-mix');
mix.js('blocks/myblock.js', 'dist/').react();Code-Sprache: JavaScript (javascript)

Info

Falls ihr anschließend eine Fehlermeldung erhaltet, installiert noch React über npm:

npm install react --saveCode-Sprache: Bash (bash)

Zwar benötigt ihr nicht zwingend für die Entwicklung eines (einfachen) Blocks Webpack bzw. React, es macht aber einfach viel mehr Spaß mit import zu arbeiten und dank JSX statt …

return wp.element.createElement('p', { class: 'welcome' }, 'Hallo World')Code-Sprache: JavaScript (javascript)

… einfach …

return <p className="welcome">Hallo World</p>Code-Sprache: JavaScript (javascript)

… zu schreiben.

Übrigens installiert Laravel Mix die benötigten Abhängigkeiten wirklich erst, wenn man eine entsprechende Funktion z.B. mix.react verwendet. So wird der node_modules Ordner nicht unnötig aufgebläht.

Abhängigkeiten für euren Block könnt ihr entweder aus dem window.wp Objekt beziehen:

const { RichText } = wp.blockEditor;Code-Sprache: JavaScript (javascript)

Oder installiert die einzelnen Module via npm z.B. npm install @wordpress/block-editor --save und importiert sie in eurer JavaScript-Datei:

import { RichText } from '@wordpress/block-editor'Code-Sprache: JavaScript (javascript)

CSS Preprocessor verwenden

Larvel Mix hilft euch auch mit eurem CSS z.B., wenn ihr einen CSS-Transformator wie PostCSS, Sass oder LESS verwenden wollt.

Auch hier reicht (jeweils) nur eine Zeile:

mix.sass(src, output);
mix.less(src, output);
mix.postCss(src, output, [require('postcss-some-plugin')()]);Code-Sprache: JavaScript (javascript)

Und vieles mehr…

Laravel Mix kann euch noch bei vielen weiteren sonst nervigen Webpack-Konfigurationen helfen, zum Beispiel:

BrowserSync: Jedes Mal, wenn ihr eine Änderung an einer Datei vornehmt und speichert, lädt bzw. synchronisiert BrowserSync eure Testumgebung in eurem Browser.
Versioning: Jedes Mal, wenn ihr sich euer Output ändert, speichert Laravel Mix den Datei-Hash in der mix-manifest.json. Mit einer Hilfsfunktion, könnt ihr die mix-manifest.json in eurem WordPress Theme/Plugin auslesen und als Version für wp_register_style bzw. wp_register_script verwenden.
Minifizieren & Kombinieren: Ihr könnt Laravel Mix bzw. Webpack auch einfach einzelne CSS/JS-Datein kombinieren oder minifizieren lassen.

Mehr Details findet ihr in der Dokumentation zu Laravel Mix.

Fazit

Ich finde die Lernkurve bei Webpack einfach viel zu steil und bin sehr froh, dass man mit Laravel Mix alle wichtigen Features mit ein paar Zeilen verständlichen Codes lösen kann. Sicherlich holt man sich so eine zusätzliche Abhängigkeit ins Projekt, aber durch die Einfachheit von Laravel Mix sehe ich da auch in der Zukunft keine großen Probleme. Zur Not kann man sehr einfach über mix.dump() auf eine eigene Webpack-Konfiguration umsteigen.

Alternativen

Speziell für Blöcke gibt es das Toolkit create-guten-block von Ahmad Awais. Es konfiguriert ebenfalls Webpack perfekt für diesen Einsatz.

Eure Erfahrung?

Konfiguriert ihr Webpack selber? Nutzt ihr ein anderes Build Tool? Habt ihr bereits Laravel Mix ausprobiert? Hinterlasst gerne ein Kommentar!