Stages of Learning Webpack
Tags: javascript, webpack
Published: 2017-05-15 22:26:29

---
title: "Stages of Learning Webpack"
published: true
description: A relatively unprofessional preface to an upcoming post about using/navigating Webpack. Warning -  Lots of 'no clue what the hell is going on' ahead.
tags: javascript, webpack
cover_image: 
---
_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.
___

[first_working_config]: https://thepracticaldev.s3.amazonaws.com/i/xf0apprk64sawysnyw94.png "Screenshot of commit message from my first working Webpack config ðŸŽŠ"

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](https://github.com/nitishdayal/react_from_scratch) 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.
![alt text][first_working_config]
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](https://github.com/nitishdayal/react_from_scratch) 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](https://dev.to/nitishdayal/stages-of-learning-webpack-pt-2---the-config) is up!