Webpack源映射指向缩小的bundle

Question

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

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

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

  

未捕获错误：foo

     

at 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',
};

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

我得到的是这样的：

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