指向缩小包的 Webpack 源映射答案

【问题标题】：Webpack source maps pointing to minified bundle指向缩小包的 Webpack 源映射
【发布时间】：2017-06-22 14:43:11
【问题描述】：

我正在为现有项目设置 Webpack 构建过程，并且在源映射方面遇到了一些问题。

我正在使用devtool: 'eval-source-map',。如果浏览器发生错误，堆栈跟踪中的每个文件/行号都指向 Webpack 包中压缩成单行的文件。

例如，堆栈跟踪的第一行可能如下所示：

未捕获的错误：foo

在 child.initialize 处（评估在 (http://127.0.0.1:8000/js/dist/index.js:1270:1), :45:10）

单击文件名/行号将我带到捆绑包中发生错误的文件被Webpack“包含”的行。看起来像这样：

/* 223 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
// Below is the line it points to, and it goes on to have the entire file on the same line
eval("/* WEBPACK VAR INJECTION */(function(Backbone, $, _) { ...

但是整个文件内容都在这一行，所以这完全没用。

即使我将 Webpack 配置缩减为以下内容，也会发生这种情况：

var path = require('path'),
    webpack = require('webpack');

module.exports = {
    entry: {
        'indexhead': './static/js/main.js',
        'accounthead': './static/js/accountManager.js'
    },
    output: {
        path: path.join(__dirname, 'static/js/dist'),
        filename: '[name].js'
    },
    devtool: 'eval-source-map',
};

对于here 列出的其他类型的开发源地图类型也会发生这种情况。如果改为使用devtool: source-map 的生产设置，我仍然会被指向一个巨大的捆绑文件，其中包含每个脚本，但至少这些行是“展开”的，我可以看到错误发生在哪里。

我该如何解决这个问题，或者至少进一步排除故障？

【问题讨论】：

所以您希望它在控制台中单击 filename:lineNumber 时将您定向到原始 js 文件而不是输出包？
至少我想让它告诉我这条线。现在在 dev 中，它会将我带到包含整个原始 JS 文件的一行，因此无法跟踪行号。

标签： javascript webpack source-maps

【解决方案1】：

我确实尝试重现该问题，但我发现了这一点。也许这不是你要找的地方。

将代码与 webpack 捆绑后，代码会在 Chrome 控制台中引发错误。

当我点击 main.js:2166 链接时，浏览器会将我导航到捆绑的代码。

当我刷新 Chrome 浏览器时，我看到一个指向原始文件“layout.js”的链接。

单击此链接将带我进入非捆绑代码。

如果我使用带有 devtool: 'eval-source-map' 的 Webpack 构建网页，我会得到与使用 Webpack-dev-server 相同的结果。您可以检查构建 js 文件是否具有嵌入的 sourceMap。

【讨论】：

我怕我总是有同样的错误输出，无论我刷新页面多少次（我没有使用webpack-dev-server）
嗨，Alex，我再次使用 webpack build 进行了测试。同样的结果，您必须刷新 Chrome 浏览器才能看到正确的链接。它在 FireFox 中不起作用。检查编译后的 javascript 文件中是否有嵌入的源映射。如果您需要更多帮助，请告诉我。

【解决方案2】：

我可以复制您的问题的唯一方法是在 Chrome 设置中禁用源映射：

我得到了这样的东西：

当我启用源地图时，我得到了如下图所示的内容。通过点击右上角的文件名，我被带到了正确的地方。

【讨论】：