Webpack Meetup bij Combell

Onze front-end developer Sander was een tijdje geleden aanwezig op de Webpack meetup bij Combell. Hij vertelt ons alles over de voordelen van Webpack en hoe wij deze populaire module bundler toepassen op onze webprojecten.

Met een beperkte voorkennis van Webpack ging Sander naar de populaire meetup en kwam hij al snel tot de conclusie dat de implementatie toch niet zo gevreesd was dan gedacht. Aan de slag dus!

Wat is Webpack?

Wat is Webpack?

Webpack is een populaire module bundler die ons onder andere helpt met JavaScript, CSS en afbeeldingen te compileren, verkleinen en in te laden waar nodig. Een interessante tool bij het ontwikkelen van een nieuwe website, webshop of webapplicatie.

Webpack omschrijft zichzelf als “static module bundler”. In grote lijnen komt het erop neer dat je als webdeveloper 'modules' kan definiëren en zo je code kan opsplitsen in kleinere en makkelijk te onderhouden blokken. Webpack zorgt ervoor dat deze blokken automatisch en waar nodig worden ingeladen in de website. Het ‘automatisch inladen’ van deze blokken zorgt ervoor dat enkel datgene wat nodig is wordt ingeladen. Met snellere websites en minder data-verbruik als gevolg.  

Waarom Webpack?

Hoewel Webpack reeds bestaat sinds 2012, is het pas echt populair geworden met de komst van JavaScript frameworks zoals React, Angular en Vue.

Configuratie

Wat menig developer lang afschrikte om Webpack te gebruiken was de ingewikkelde configuratie en het verschil met de werking van taskrunners zoals Gulp en Grunt (die we eindelijk gewoon waren). Webpack 4 heeft echter veel van de configuratie overbodig gemaakt, omdat de ontwikkelaars van Webpack merkten dat veel van deze configuratie bij iedereen hetzelfde was. Daarom is sinds versie 4.0.0 een configuratiebestand volledig optioneel.

Code Splitting

Waar er bij Gulp en Grunt alle JavaScript code meestal gebundeld wordt in 1 of 2 grote bestanden, biedt Webpack de mogelijkheid tot Code Splitting. Deze techniek zorgt ervoor dat blokken code worden ingeladen op het moment dat ze gebruikt (gaan) worden. Dit zorgt uiteraard voor een aanzienlijke verbetering van performantie, zeker op mobiele apparaten.

Caching

Een veelvoorkomend probleem bij webdevelopment is caching. Een gekend knelpunt voor onze webdevelopers: een stuk code van een website is aangepast, maar sommige gebruikers (vb. onze klanten) zien nog de oude versie van de website. Een vervelende situatie als je aan de klant wilt verduidelijken dat de gevraagde aanpassingen weldegelijk werden doorgevoerd.

Een gekende techniek om dit tegen te gaan is de bestandsnaam aanpassen zodat de browser denkt dat het om een ander bestand gaat. Het aanpassen van de bestandsnaam wordt echter al snel vergeten, met de gekende gevolgen.

Webpack zorgt ervoor dat aangepaste bestanden automatisch een andere versienummer krijgen door middel van een hash te creëren op basis van de inhoud van het bestand (een contenthash). Deze hash wordt dus ook enkel aangepast als er effectief iets in het bestand is gewijzigd.

Hot Module Replacement

Een andere handige techniek voor developers is Hot Module Replacement (of HMR). Dit zorgt ervoor dat tijdens het programmeren de aangepaste modules automatisch 1 op 1 vervangen worden in de browser, zonder dat de pagina ververst moet worden en zonder impact op de rest van de pagina (of andere modules).

De toekomst van Webpack

Zoals het wel vaker gaat in webdevelopment steken er al snel alternatieven de kop op als bepaalde tools te complex, omslachtig of repetitief worden. Zo merkten de ontwikkelaars van Parcel op dat veel developers moeite hadden met de configuratie van Webpack en hebben ze een zero-config alternatief aangeboden. Webpack heeft hier echter vrij snel op ingespeeld en zoals eerder vermeld bieden ze sinds versie 4 ook zero-config aan.

Het lijkt er voorlopig dus op dat Webpack nog enige tijd de populairste oplossing gaat blijven, al weet niemand in onze sector met zekerheid wat er morgenvroeg hot zal zijn.


Geschreven door

Sander Quirynen

Sander Quirynen
Frontend Developer
sander@innomedio.be
+32 (0)3 321 72 58

Meer weten over wat we voor jouw project kunnen betekenen?

Wij maken met plezier vrijblijvend een afspraak om kennis te maken. Zo kunnen we luisteren naar je verhaal en kijken hoe we je van dienst kunnen zijn.

Bedankt voor je bericht

We nemen zo snel mogelijk contact met je op.

Er liep iets iets mis. Probeer Opnieuw. Kijk zeker na of alle verplichte velden zijn ingevuld.