Webpack 源映射指向缩小包

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

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

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

未捕获的错误：foo

at child.initialize（评估于（http://127.0.0.1:8000/js/dist/index.js:1270:1 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 https://webpack.js.org/configuration/devtool/。如果我使用生产设置devtool: source-map，我仍然被指向一个巨大的捆绑文件，其中包含每个脚本，但至少这些行是“展开”的，我可以看到错误发生在哪里。

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

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

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

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

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

单击此链接会将我带到非捆绑代码。

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