An Opinionated Webpack Tutorial

I’ve wasted a lot of time trying to sort out my javascript workflow, and Webpack has brought me very close to the smooth and drama free experience I’m been looking for. The documentation is a bit rough, so I posted a step by step Webpack tutorial based on what I’ve learned so far.

One of the big factors holding back the advancement of the front end Javascript ecosystem has been the lack of a standard module system. Not having a simple and sane way to manage internal and external dependancies has a very negative effect on the way javascript applications are built and maintained.

Having experimented with most of the current javascript module tooling available today, Webpack stands out to me as being the simplest, most pragmatic and yet flexible tools around. This may change in the future, but Webpack+Babel lets me author my own code using ES6 module syntax and interoperate with other code packaged in any style with relative ease.

The Webpack documentation is a start, and Pete Hunt has another guide, but I wanted to distill the bits and pieces that I’ve cobbled together over the course of a few projects. It’s biased toward my workflow and tools of choice (ES6 and Sass), but I hope the progression is clear enough that you can glean something worthwhile even if you have a few differing preferences.

Here it is: An Opinionated Webpack Tutorial