Source Maps 101 + Webpack - Ep. 6

?View more development courses and content at https://chriscourses.com/

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

Timeline:
0:34 - Tutorial starts
0:40 - What is a source map?
1:09 - Illustration as to why we'd want to use source maps
2:35 - Implementing source maps for JS
2:58 - Source map devtool options
5:05 - Implementing source maps for CSS

Resources:
https://webpack.github.io/docs/configuration.html

Beatz:
Immortal Beats - Oh Wee - Creative Commons
For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com.


Support Chris Courses Through Patreon:
--------------------------------------
https://www.patreon.com/chriscourses


Chris Courses Social:
---------------------
Twitter: https://twitter.com/chriscourses
Facebook: https://www.facebook.com/chriscourses
Instagram: https://www.instagram.com/chriscourses

Christopher Lis Social:
-----------------------
Twitter: https://twitter.com/christopher4lis
CodePen: http://codepen.io/christopher4lis