Laravel Mix - een eenvoudige en krachtige wrapper rond Webpack

Laravel Mix

We zullen het hebben over Laravel Mix. Om het beter te begrijpen, zullen we beginnen met uit te leggen wat Webpack is.

Webpack is een ongelooflijk krachtige modulebundelaar die je JavaScript en assets klaarmaakt voor de browser en daarom is Mix een dunne laag bovenop webpack die dient voor het dynamisch opbouwen van je Webpack-configuratie. Hoewel Laravel Mix oorspronkelijk is gebouwd voor Laravel-projecten, kan het natuurlijk worden gebruikt voor elk type applicatie.

Overzicht

De nieuwste versie van Laravel Mix is versie 6 en vereist afhankelijkheden die compatibel zijn met Webpack 5 of PostCSS 8. Het is een gratis tool die automatisch je assets optimaliseert en miniseert bij het bouwen voor productie met het npx mix --production commando, waar we het later over zullen hebben.

Laravel Mix wordt ook geleverd met basisondersteuning voor typescript en View, en om te helpen met caching op de lange termijn, biedt mix de methode mix.version(). Als versiebeheer is ingeschakeld, wordt elke keer dat je code wordt gecompileerd een unieke query string-ID toegevoegd aan je assets en bij het compileren zien we de gehashte namen in het bestand mix-manifest.json. Een ander groot voordeel van de mix API is dat we leveranciersbibliotheken kunnen isoleren of extraheren in hun eigen bestanden, wat natuurlijk zal resulteren in een aanzienlijk kleiner app.js bestand. Met hot module replacement kunnen we modules uitwisselen, toevoegen of verwijderen terwijl een applicatie draait zonder deze volledig te herladen. Het enige wat we moeten doen is vanaf de commandoregel npx mix watch --hot uitvoeren om een node server op te starten en onze bundel te controleren op wijzigingen.

Mix biedt het mix.css() commando voor basis CSS compilatie en het iPostCSS plugin ecosysteem als onderdeel van onze compilatie, en we hebben ook opties voor Sass en Less compilatie. Standaard leidt Mix al onze CSS door de populaire Autoprefixer PostCSS plugin. Als zodanig zijn we vrij om de nieuwste CSS 3-syntaxis te gebruiken, met dien verstande dat alle benodigde browser-prefixen automatisch worden toegepast. Een belangrijk concept om te begrijpen is dat Mix en Webpack alle URL's met relatieve paden binnen onze stylesheets zullen herschrijven, maar de absolute paden zullen altijd worden uitgesloten van URL-herschrijving.

Installatiestappen

Hier kunnen we zien hoe je Laravel Mix installeert en configureert.

Eerst moeten we Mix installeren via npm of yarn.

npm install laravel-mix --save-dev

yarn add laravel-mix

De tweede stap is het maken van een mix-configuratiebestand met de naam webpack.mix.js

webpack.mix.js aanraken

Dan definiëren we daar onze compilatie. In dit voorbeeld stellen we ons openbare pad in en gebruiken we de mix sass compilatie.

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

Tot slot hoeven we alleen nog maar een npx mix commando uit te voeren om de juiste Webpack build te activeren.

Nuttige CLI-commando's

• Compileren in een lokale omgeving

  npm mix

• Let op Activa voor veranderingen

  npx mix horloge

• Polling

  npx mix-watch-opties-poll

• Hete module vervangen

  npx mix horloge --hot

• Compileren voor productie

  npx mix --productie

• Het pad van de mixconfiguratie aanpassen

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

Nuttige functies

• Mix biedt een aantal andere nuttige functies, bijvoorbeeld als we leverancierbibliotheken hebben die gescheiden moeten blijven van onze kernwebpack-bundel, kunnen we mix.combine() gebruiken om meerdere bestanden samen te voegen of op te tellen tot een enkel bestand met de naam bijvoorbeeld merged.js.
• Een andere interessante functie is browsersync waarmee onze bestanden automatisch worden gecontroleerd op wijzigingen en eventuele wijzigingen in de browser worden geïnjecteerd, allemaal zonder dat er een handmatige verversing nodig is.
• In bepaalde gevallen kan het gemakkelijker blijken om een niveau lager te gaan en de onderstreepte webpackconfiguratie rechtstreeks op te heffen en mix biedt het mix.webpackConfig() commando om ons toe te laten dit te doen.
• Laten we nu eens kijken naar de event hooks. In sommige scenario's moeten we een stukje logica uitvoeren voordat de compilatie begint. Als we bijvoorbeeld een map moeten kopiëren of een bestand moeten verplaatsen, laat de functie mix.before() dit toe en Mix zal niet beginnen met compileren totdat alle haken volledig zijn opgelost. Aan de andere kant kunnen we een stuk logica uitvoeren nadat Webpack zijn compilatie heeft voltooid met de mix.after() methode. Bijvoorbeeld als u een lijst van alle gecompileerde assets wilt loggen.

Voor meer informatie kun je terecht in de officiële documentatie van Laravel Mix.