跟踪 Webpack 错误/行回到其源代码行

Question

通常，如果我使用 webpack 将代码从 ES2015 语法编译/转换为我的 Web 浏览器可以读取的内容（在单个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？）的方法可以使用本机 webpack 将这段代码追溯到其原始的预编译源代码？如果没有，是否有软件包可以将此类功能添加到 webpack 中？如果没有，在较高的层面上，我想开始谷歌搜索什么来将其添加到 webpack 中？

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

如果这种事情（从编译后的可交付成果中追溯到源文件的代码）在计算机科学/编程圈中有一个既定的名字，那就加分了。

Answer 1

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

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

有些设置比其他设置更快，因此使用类似的设置eval-cheap-module-source-map可能有利于开发（您希望快速迭代），但对生产不利，因为它会运行一堆评估。

一般来说，便宜的*变体会更快，因为它们丢弃列号并且只告诉您哪一行映射到哪一行。