Source Maps 101 + Webpack - Ep. 6

November 28th 2016 | 3.5k views

Source maps are an integral tool to accurately pinpointing bugs within our source code—the files we actually write code in.

Browsers typically read code from a distribution directory that contains bundled and minified files. This is fine until one realizes that the error message they're receiving in the console is for line 1 of a minified file. To fix this bug, you'd have to sift through the minified file, switch over to a source file, and then use a search command to find the issue from there. This is cumbersome, time consuming, and flat out annoying process—but luckily for us, source maps provide an easy to implement fix.

This video will teach you the basics as to what source maps are, why we'd want to use them, and how to implement them using webpack.

Git Repo so You Can Follow Along:

https://github.com/christopher4lis/cc-source-maps-webpack