From 9632aea940de9eacf35b0cb484d9a9ab0d989830 Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Wed, 23 Mar 2016 22:38:43 -0500 Subject: [PATCH] Add Debugging With Full Source Maps as a webpack til --- README.md | 3 ++- webpack/debugging-with-full-source-maps.md | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 webpack/debugging-with-full-source-maps.md diff --git a/README.md b/README.md index 903159a..d869b54 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ variety of languages and technologies. These are things that don't really warrant a full blog post. These are mostly things I learn by pairing with smart people at [Hashrocket](http://hashrocket.com/). -_372 TILs and counting..._ +_373 TILs and counting..._ --- @@ -449,6 +449,7 @@ _372 TILs and counting..._ ## Webpack +- [Debugging With Full Source Maps](webpack/debugging-with-full-source-maps.md) - [Run ESLint As A Preloader](webpack/run-eslint-as-a-preloader.md) - [Use A Specific Config File](webpack/use-a-specific-config-file.md) diff --git a/webpack/debugging-with-full-source-maps.md b/webpack/debugging-with-full-source-maps.md new file mode 100644 index 0000000..675a4c6 --- /dev/null +++ b/webpack/debugging-with-full-source-maps.md @@ -0,0 +1,16 @@ +# Debugging With Full Source Maps + +After Webpack runs your JavaScript through various loaders, it no longer +looks like the code you were writing in your editor. This can make debugging +difficult when you inspect the source of an error in the browser's devtools. +Fortunately, Webpack makes it easy to enhance debugging with full source +maps of your code. Just add the following option to your Webpack config: + +```javascript +devtool: source-map +``` + +This will generate a full source map with a filename that is something like +`bundle.js.map`. + +Note: this will slow down the webpack build process a bit.