title: Trace a Webpack Error/Line Back to its Source Line
body: <p>Often, if I'm using webpack to compile/transpile code from ES2015 syntax to something my web browser can read (in a single <code>bundle.js</code> file) I'll end up with an error like this</p>
  
  <pre><code>Uncaught ReferenceError: helloWorld1 is not defined
      at Object.&lt;anonymous&gt; (bundle.js:99)
      at __webpack_require__ (bundle.js:20)
      at toExport (bundle.js:66)
      at bundle.js:69
  </code></pre>
  
  <p>The specific error here isn't important -- what's important is that Chrome points me towards line 99 of bundle.js, that looks like this (with surrounding lines for context)</p>
  
  <pre><code>/***/ }),
  /* 2 */
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__hello_world2__ = __webpack_require__(1);
  helloWorld1 = __webpack_require__(0);
  
  alert(helloWorld1.getMessage());
  alert(__WEBPACK_IMPORTED_MODULE_0__hello_world2__["a" /* getMessage */]());
  
  
  /***/ })
  /******/ ]);        
  </code></pre>
  
  <p>Is there a deterministic(-ish?) way to trace this chunk of code back to its original, pre compilation source code using native webpack?  If not, are there packages that add this sort of functionality to webpack?  If not, at a high level, what would I want to start googling to add this to webpack myself?</p>
  
  <p>I know I could probably grep about my source code and find something that <em>might</em> be what I'm looking for, but that's not going to scale to a large project. </p>
  
  <p>Bonus points if this sort of thing (tracing back code form a compiled deliverable to a source file) has an established name in computer science/programming circles. </p>