Webpack源映射指向缩小的bundle

Question

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

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

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

未捕获的错误：foo

在child.initialize（eval at（ 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',
};

对于此处概述的其他类型的开发源地图类型也会发生。 如果我使用devtool: source-map的生产设置devtool: source-map ，我仍然会指向一个包含每个脚本的巨型包文件，但至少这些行是“展开”的，我会看到错误发生的位置。

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

Answer 1

我确实试图重现这个问题而且我找到了这个。 也许这不是你要找的地方。

将代码与webpack捆绑在一起后，代码在Chrome控制台中出错。

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

当我刷新Chrome浏览器时，我看到了原始文件'layout.js'的链接。

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

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

Answer 2

我可以复制您的问题的唯一方法是在Chrome设置中停用源地图：

我得到的是这样的东西：

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