Trace a Webpack Error/Line Back to its Source Line

Often, if I’m using webpack to compile/transpile code from ES2015 syntax to something my web browser can read (in a single bundle.js file) I’ll end up with an error like this

Uncaught ReferenceError: helloWorld1 is not defined
    at Object.<anonymous> (bundle.js:99)
    at __webpack_require__ (bundle.js:20)
    at toExport (bundle.js:66)
    at bundle.js:69

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)

/***/ }),
/* 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 */]());


/***/ })
/******/ ]);        

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?

I know I could probably grep about my source code and find something that might be what I’m looking for, but that’s not going to scale to a large project.

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.

Answer

You’re looking for something called a sourcemap. A sourcemap is a file that maps every line of your source to the generated output. Chrome can use this map to lead you back to your original source. If you add devtool: 'source-map' into your webpack config, it should add source maps to your project.

Here’s a page with all the settings you can use to generate sourcemaps: https://webpack.js.org/configuration/devtool/

Some settings are faster than others, so using something like eval-cheap-module-source-map might be good for development, where you want to iterate quickly, but bad for production, since it runs a bunch of evals.

In general the cheap-* variants will be faster since they discard column number and only tell you which line maps to which.