Webpack, step-by-step

I've been using Webpack for web development for probably close to a year now. Over the course of that time, I've learned a lot about it...a lot of what to do, a lot of what not to do. Here's a few of the main conclusions I've come to since I first started using it:

  • Its extremely powerful. You can do amazing things with it...once you know what you're doing with it
  • The documentation for it has many opportunities for improvement (I'm sure they wouldn't mind help contributing)
  • There aren't many (any?) sources out there that I've been able to find, to help learn how to use it starting from using the very basics and working your way up.

That last point is the primary motivation for this, the first in a series of blog posts on how to use webpack. I've always been the kind of person who learns best by working in very small, incremental steps to put a solution together. It's been a challenge to work that way with webpack, as it seems like the vast majority of documentation/examples available out there go straight to diving in to the deep end with it.

In this series of blog posts, I plan to start from the most basic usage, and gradually working my way up to a very complex setup with multiple loaders that have various configurations and output. My intention is for each post to be as brief and to-the-point as possible, so that consumers can hopefully jump right in wherever they're at in the process of learning/building with webpack.

I hope this is helpful for someone.

NOTE: comments and feedback is always appreciated. I am by no means a subject matter expert with webpack, I'm just trying to share what I've learned. I'm sure there are better ways to do what I'm sharing here, and I'm always excited to learn newer and better ways to do things. I only ask that we keep the feedback relevant, constructive and respectful.