javascript - 将 Webpack 错误/行跟踪回其源代码行

Question

通常，如果我使用 webpack 将代码从 ES2015 语法编译/转译为我的网络浏览器可以读取的内容(在单个 bundle.js 文件中)，我最终会遇到错误像这样

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

这里的具体错误并不重要——重要的是 Chrome 将我指向 bundle.js 的第 99 行，它看起来像这样(周围的行用于上下文)

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


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

是否有一种确定性的(-ish？)方法可以使用 native webpack 将这段代码追溯到其原始的预编译源代码？如果没有，是否有将这种功能添加到 webpack 的软件包？如果不是，在高层次上，我想开始谷歌搜索以自己将其添加到 webpack 中是什么？

我知道我可能可以对我的源代码进行 grep 并找到可能我正在寻找的东西，但这不会扩展到大型项目。

如果这类事情(将代码从已编译的可交付文件追溯至源文件)在计算机科学/编程界享有盛誉，则可加分。

Answer 1

您正在寻找一种叫做源 map 的东西。 sourcemap 是将源代码的每一行映射到生成的输出的文件。 Chrome 可以使用此 map 将您带回原始来源。如果您将 devtool: 'source-map' 添加到您的 webpack 配置中，它应该将源映射添加到您的项目中。

这是一个页面，其中包含可用于生成源 map 的所有设置: https://webpack.js.org/configuration/devtool/

一些设置比其他设置更快，所以使用像 eval-cheap-module-source-map 这样的东西可能对开发有好处，你想快速迭代，但对生产不利，因为它运行一堆评估。

通常 cheap-* 变体会更快，因为它们丢弃列号并且只告诉您哪条线映射到哪条线。