Stages of Learning Webpack

DISCLAIMER: This post doesn't provide any valuable information. It's mostly just for fun, and to share the struggles and 'Aha!' moments that some of us might have mutually experienced.

Purpose of this post:

1. Webpack is worth learning. It is so much more than a module bundler.

2. A few months back, I wrote a post on here about my first experience with configuring TypeScript + React and Webpack. That configuration was, apparently, terrible. So terrible that I decided to delete that post because I was giving out a lot of misinformation (also I looked really stupid 🤷🏾”♂️). I've learned a bit more about Webpack since then and would like to take another crack at that post. And, preferably, do it right. But first, I wanted to share a summary of my Webpack learning experience (because light humor and humility are good things).

Stages of Learning Webpack (from Jan-April):

1. I write (copy/paste) my first config. I have no idea what the hell I'm doing, but according to the Twitter HypeTrainâ„¢, I need Webpack. I run Webpack and end up with a 2MB bundle for a 'Hello World', which is now broken with error messages I'm positive are written in some alien language. Baffled, I start changing things, still no clue what the hell I'm doing. Just...panicked, trying to figure out why this thing that was supposed to make my app smaller just made it like 500x bigger. How did I manage to break this so badly? I headdesk the night away.

2. Aha! I did a thing! My app is working and WAY smaller! 200kb?! Daaaaaaaaang boi! I'm stoked! I still have no idea what the hell is going on, but I'm so excited I decide to make it into a starter/boilerplate and write a blog about it. It's up for two months. For whatever reason, no one bothers to let me know...hey, you're doing it wrong and it should be WAY smaller. I keep headdesking away.
   

3. I now have a basic idea of what the hell I'm doing. Webpack is a thing. It takes an object with some key/value stuff. It uses the key/value stuff to go through my app and, based on what keys/values are provided, creates a bundled version of my app. It might be big; it might be small. The point is that it's bundled. Anything after that is my call. 'My call' has graduated from randomly changing things and hoping for the best to docs > find the thing > install the thing, if necessary > use the thing. Apparently this object can actually be a function that returns an object? Whatever. Embarrassed that I ever wrote/published that original article, I find it and delete it immediately. I want a redo, and I want to do it right. I headdesk on.

4. Webpack docs and I are tight. I know where to go to find what I need, but I've been breaking/remaking these configs for so many months, at this point the docs are a fallback. Webpack is, officially, the homie. I can probably set up a dev environment with separate webpack configs for dev/prod/staging in a short period of time. I have opinions on what loaders and plugins to use when/why. I've had conversations about separate vs. single webpack config files; conversations which generally ended with either party giving the ol' eye-roll and 'agree-to-disagree' spiel. Opinions, right? Am I a pro? By no means. Do I have a general understanding of the tool, the problems it attempts to solve, the benefits I can potentially gain from it, and why it is that I apparently needed this thing? Absolutely.

I'll have another post tomorrow which details:

• What is Webpack? Do I really need it? (spoiler: probably not, but you might benefit from it)
• The changes I've made to the boilerplate since the last post, and why
• Recommendations & tips for navigating the documentation
• Templates for a few of the more typical front-end development setups I've come across

If you see opportunities for improvements in the boilerplate configuration, please contact me/submit a PR. Thanks for reading! ✌🏾

EDIT: Part 2 is up!