Webpack from Nothing

Minimizing Pain while Learning Why Things Work

by David Bryant Copeland AKA @davetron5000

Updated Jan 21, 2020

What Problem Are We Solving?

This site explains Webpack, but it also explains so much more. It's a journey from nothing to developing, testing, and deploying a basic website, all designed around minimal use of the tools in the challenging JavaScript ecosystem.

I am not someone that accepts blobs of JSON as explanations for how things work. I need to really understand how the tools I'm using work, and why we have to configure them the way we do. The JavaScript ecosystem is rife with Medium tutorials and out-of-date blog posts that assault you with massive amounts of unnecessary configuration options and require tools and libraries that you don't actually need—at least not without a good reason. They also overemphasize flexibility and choice, and undervalue the happy path to actually working on your problem.

During your journey through this site, you'll use Webpack, Karma, Jasmine, Babel, and many different plugins and extensions, all to get a very basic development environment working. There will be little handwaving. We'll add tools and configuration only when needed to solve a specific problem.

This means deep-dives and sidetracks, but you'll learn a lot about why Webpack exists, what it's for, and how it interacts with the various parts of the JavaScript ecosystem.

I've written this from my personal point of view, which is to say an experienced developer who is curious, can understand reasonable things, isn't an expert in the JavaScript ecosystem, but above-all wants a predictable, modern, professional, hassle-free developer experience, no matter what.

What you Need

You just need a UNIX-like operating system where you can install basic software and run commands. I'll tell you what to install when, but I'm assuming you have a shell where you can do stuff like mkdir and cat, where you have configured a text editor to write code, and where you can install software like Node.

How to Read this

The book's code is executed as the book is published, so you should go through this and type what it says type, write the code it says to write, and view things in the browser when told. Even if early stuff feels remedial, it's useful for your hands to type code, especially when you see the surprisingly small amount of configuration you have to type for basic things.

OK, let's get to it!