Introduction

When I started writing this blog series I thought I would only spend 3 months on this at most but if you’ve taken notice of my posting pattern, its already been a lot longer than that. I’ve accepted my inability to post on a consistent schedule and have embraced my lackadaisical approach to blogging. I have to remember it’s a pastime intended for enjoyment and shouldn’t be forced at the expense of content quality (*cough* like my last post *cough*). …


Introduction

It’s been a while since my last post but I’m finally back! I attribute my slow pace of publishing to my previous lack of structure, but now I’ve decided to dedicate time towards creating a structural framework for my future posts. Below is a detailed description of the sections that will compose my future posts:

Introduction - This is where I’ll discuss updates to my blogging schedule, recent roadblocks I’ve overcome, and my overall blogging experience in general.

Recap - This will give context on where we are in our exploration of the webpack codebase. …


Last post we left off trying to figure out how we can view all the functions attached to a hook, so this post we’ll take a closer look at the hooking framework used within webpack. The hooks in the compiler class will be our main focus since that’s where we last left off in the previous post.


If you’ve been following my blog posts you’ll know that I’ve been exploring the webpack codebase quite extensively both as a challenge to myself and a way to educate others on looking at open source code. My last post covered hooks and briefly mentioned the framework that underlies webpack’s architecture, ‘Tappable’. This post builds off of that knowledge and will investigate the early stages of the webpack execution pipeline. Along the way I’ll also share the thought process I use to understand foreign codebases and give feedback on what I like and don’t like about how the code is structured.

Setup


When first diving into webpack’s source code, the biggest hurdle to understanding the code base was trying to follow the “flow of control” or the code paths that get run when webpack is executed. My hardships all stem from the usage of something the web development community seems to love — hooks.

Hooks

Before delving further into how hooks complicate the webpack code base, I’d like to give a brief explanation of what hooks are.

Wikipedia says the following about hooks and hooking:

“In computer programming, the term hooking covers a range of techniques used to alter or augment the behaviour…


Thanks to Markus Winkler for sharing their work on Unsplash.

Around a couple months ago, I made a commitment to learn webpack… And about a month ago I actually started to learn about webpack. It’s part of my new initiative to try and explore big open source projects on camera to try and get better at jumping into big code bases and understanding different programming paradigms. The initial plan was to learn on video, but after spending a couple hours looking through the code and still not understanding the flow of control of the program, I decided to hold off on that.

I previously thought that fumbling around for hours…


The importance of web caching and how old http responses can mirror the http responses of the future.

Introduction

Have you ever wondered why a slow webpage always seems to load right when you close or refresh the tab? I’m sure there’s a very explainable answer to that phenomenon but I unfortunately won’t be writing about that today. What I will be writing about is why the page loads so fast after the refresh, even when it seems to take forever the first time around! …

Randall Naar

SWE @ Citrix

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store