Wow, I can’t believe I’m typing this article right now. Webpack and I have gone through so much.

I remember the first time I deleted hundreds of lines in gulp configuration in favor of sixty-something lines of webpack configuration. I hadn’t felt this good since, well, when I deleted thousands of lines of grunt configuration in favor of hundreds of lines in gulp configuration.

Surely webpack would be the gold standard, left unchallenged until the day browsers go the way of the dinosaur and are replaced with virtual reality or augmented reality or whatever. So efficient, so minimal, so pure. The documentation was rich and the community was strong.

Never has a comic been so relatable in my life

I have some memorable moments in my development career where I spent time learning how to configure webpack to squeeze extra performance out of my applications. I learned about every damn webpack plugin in existence and what they were used for. I started venturing into code splitting, long term caching, hot reloading, and even figured out clever ways to load my JS so that I could run my local environment in production. Even when webpack 4 was released and the plugin ecosystem was turned upside down, I stayed strong and loyal.

You’d imagine that when I started seeing threads on reddit like this, I scoffed. Pfft, what a sham. 😆 Parcel? Nothing could compare to my precious webpack. Here are some thoughts that ran through my head:

I bet *insert random tool or library X* isn’t even compatible with Parcel. I’m guessing that if I tried it out, I’d find a glaring reason why it wouldn’t work for my project and it’d just result in half a day of wasted time. Developers these days are so lazy! Webpack isn’t hard to learn! I did it, so everyone else should learn it too!!

This kind of mindset is really easy to get stuck into. Even though I’m self aware, I’ve done it so many times.

2009: jQuery? Why would I use that? Javascript works just fine! 🤔

2013: Angular 1.x? jQuery works just fine! 😐

2014: Gulp? But Grunt is fine!! 😦

2015: ES6? Babel? ES5 works just fine!! 😫

2016: Ugh, React? Angular 1.x works just fine!!!! 😠

2018: TypeScript? 😵

You get the picture.

Sometimes things change. You don’t always have to incorporate every single new thing into your arsenal, but you should at least keep an open mind.

Another Project, Another Webpack Config

Just recently I started a new repo and went through all the motions:

yarn add typescript react react-dom

I installed all the extra stuff that you can’t leave home without:

yarn add --dev ts-loader css-loader style-loader react-hot-loader mini-css-extract-plugin webpack webpack-dev-server webpack-cli

I was pleased with how small my final configuration was now with webpack 4.x providing sensible defaults. The entire configuration clocked in at just 56 lines.

After executing webpack --config ./webpack.config.js and waiting a smooth 18 seconds, my build was complete:

This is a feature that will be used internally so it doesn’t have to be hyper optimized. There is some room for optimizations and whatnot, but hey, this is a good start. 💥 🚢