Source Maps 101 + Webpack - Ep. 6

Показать описание

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:

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:

Beatz:
Immortal Beats - Oh Wee - Creative Commons

Support Chris Courses Through Patreon:
--------------------------------------

Chris Courses Social:
---------------------

Christopher Lis Social:
-----------------------

Рекомендации по теме

Комментарии

Great job. Webpack is one of the most confusing subjects in web development right now. It feels incredibly low level. But thanks to your videos it's not so frightning any more. Thanks a lot for your awesome content. You probably have the best videos about webpack right now. Keep up the good work, we need this info so much

jamesjohnson

You are my hero Chris! please dont stop these tutorials.

Alexanderkoeppen

teaching is a second nature for you chris !! big up bro

mamunmokni

I pondered what is sourcemaps for a long time, easily learned in this video. Thanks friend!!!!

charleskumar

I love it, u break everything down in a very succinct method. The best videos about webpack i have seen yet.

williambohon

Thank you so much for these WebPack series. It always looked like rocket science for me trying to even create a simple dev setup with this module loader. Keep sharing the good knowledge. I will definitely recommend this playlist with my team colleagues. Cheers! :)

gabovanlugo

You're so good at explaining complicated topics. You made it sound very easy

ronnelocampo

damn, you're extraordinary good in pointing out/explaining the problem. This makes following the solution so much easier. Thank you!

ManuelPenaloza

Is Webpack in the past now? Current Angular(-cli) doesn't seem to use it anymore. Instead it says "wdm" where I would have expected webpack.

wassollderscheiss

Thanks heaps! The webpack series has been great. I checked out a few other guides on webpack, but you've broken down each step so much better.

Looks like you are just starting out, good luck with you channel! (maybe turn down the background music on the intro :P)

jackskelton

what is color scheme you use in sublime text?

ahiraru

very clear explanation, loved the examples ;)

brunofilgueiras

Is there a version of this playlist for Webpack 4 ?

myztazynizta

Thanks for the tutorial!
But I have one question about source-map in case we have 2 loaders:
test: /\.less$/, loaders: ['raw', 'less?sourceMap']

I can't get it works - could you help?

annartyushkevich

Must have been a good lesson when released but now I can't seem to get it to work as expected in the video. Can anyone clearly write the exact difference between then and now? What are the changes occurred in webpack and browser(chrome or firefox)? Thankyou.

coolankush