Hur vi migrerade webpack från v3 till v4 i ett av våra React projekt

Dagen var kommen, det var dags att uppgradera webpack från v3 till v4 i vår React applikation. Alla skript, konfigurationsfiler och vår utvecklings-server skulle behöva göras om, och det hela kändes som en omöjlighet... men det visade sig vara mycket enklare än vi tänkt oss!

Vi uppgraderar webpack och ser vad som händer!

Vår första tanke var att helt enkelt uppgradera webpack från v3 till v4 för att sedan se vad som skulle hända, och som förväntat så kraschade projektet... Efter att ha uppdaterat paket efter paket och fixat ett fel i taget så insåg vi ganska snabbt att detta inte var någon optimal lösning, utan snarare något som skulle ta en evighet att slutföra (vi hade inte ens börjat med konfigurationsfilerna). Vi behövde en bättre lösning...

Kopiera filerna från en ny React applikation

Då vår tidigare metod inte var särskilt effektiv så bestämde vi oss för att istället generera en ny React applikation och kopiera över de filer som vi behövde i vårt nuvarande projekt. Detta tillvägagångssätt verkade väldigt lovande redan från början och det var den här vägen som vi bestämde oss för att gå. Genom att skapa en ny React applikation så fick vi de skript som krävdes för webpack v4 vilket vi sedan kunde kopiera över till vårt huvudprojekt.

Uppdatera alla tillägg

Efter att vi uppdaterat alla de filer som krävdes så var det dags att uppdatera de tillägg som webpack använder sig utav. Detta var relativt smärtfritt då vi endast behövde jämföra versionen för tilläggen i vårt huvudprojekt med de i vår applikation som vi tidigare genererat. Vi åtgärdade sedan diverse fel som uppstod i samband med varje uppdaterat tillägg.

Det första lyckade bygget

Efter att ha uppdaterat diverse tillägg samt konfigurationsfiler så var det äntligen dags att bygga vår applikation. Spänningen var olidlig och till vår  förvåning... så fungerade det! Vi startade vår utvecklings-server och BOOM! Där var vår applikation, men den såg inte fantastiskt ut... En del element hade fel position och bilder fel storlek, allt var en enda röra helt enkelt...

Uppdatera våra egna tillägg

Trots att vi tidigare uppdaterat de tillägg som fanns med i den React applikation som vi skapat, så hade vi fortfarande tillägg med en inkompatibel version som vi själva installerat. Detta bidrog till att vår applikation inte fungerade/såg ut som tänkt. Vi gick därför igenom alla tillägg och uppdaterade dessa, även här så åtgärdade vi de fel som uppstod.

Känslan av framgång!

Vi kunde nu bygga samt starta vårt React project och allt såg fantastiskt ut i webbläsaren! Vi hade nu en uppdaterad webpack version med tillägg som använder sig av den senaste versionen, men även en snabbare byggtid. Tack vare att vi genererade en ny React applikation så fick vi även stöd för verktyg så som Sass och TypeScript vilket vi inte haft tidigare.

Sammanfattning

Att migrera webpack från v3 till v4 visade sig vara mycket lättare än vad vi tänkt oss och något som vi kommer ta med oss när det är dags att uppgradera webpack i framtiden. Uppgraderingen av webpack gör det möjligt för oss att använda de senaste funktionerna så som code splitting och den inbyggda optimerings funktionaliteten samt de senaste tilläggen, vilket gör att vi kan skapa en bättre produkt i slutändan.