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.