Source Maps 101 + Webpack - Ep. 6

Released on November 28th 2016
Length: 07:31

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