跟踪 Webpack Error/Line 回到它的源代码行

Question

通常，如果我使用 webpack 将 ES2015 语法中的代码 compile/transpile 编码为我的网络浏览器可以读取的内容（在单个 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 并找到一些可能是我正在寻找的东西，但这不会扩展到大型项目。

如果这类事情（将代码从已编译的可交付成果追溯至源文件）在计算机 science/programming 圈子中享有盛誉，则可加分。

Answer 1

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

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

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

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

跟踪 Webpack Error/Line 回到它的源代码行

Trace a Webpack Error/Line Back to its Source Line

javascript

google-chrome

webpack

stack-trace