DevTools解析SourceMap失败

Question

我试图让我的Webpack项目有一个源代码地图文件。

我终于得到了正确的设置，所以它会这样做，但现在我得到了这个错误：

DevTools无法分析SourceMap:http://MyServer/MyApp/bundle.js.map

我转到它声明的URL，发现一个json文件具有以下属性：

• 版本-设置为3
• 来源-非常长的字符串数组，似乎是webpack路径到我的文件。
• 名称-似乎是随机变量和函数的非常长的字符串数组。
• 映射-一长串看似随机的大写字母和逗号。
• file-设置为bundle.js
• 来源内容-非常非常长的字符串数组（超过1000万字符）。我所有的源代码。 设置为空字符串

这一切似乎都是有效的json。不幸的是，Chrome没有给出解析源映射失败的原因。

有没有办法让Chrome解释为什么解析源映射失败？

或者，如果没有，有人知道为什么我的源地图会失败吗？（我的代码太大，无法发布，但这里有我的webpack.config.js和package.json文件。）

笔记：

• 我已经用Webpack2.2尝试过了。第1页，第2.3页。2和网页2.6。1.

Answer 1

在我的例子中，我不得不禁用Adblock来消除错误。

Answer 2

根据经验，我不希望客户端告诉你为什么它不能解析源地图（尽管这很好）。我遇到了一些工具无法解析大型源映射的问题（可能是内存限制），考虑到您的大型资产规模，我将首先查看该问题。

Webpack为devtoolconfig字段支持几个不同的值，其中一些值不如默认值可靠。您是否尝试过，例如，“廉价模块源代码映射”？仅获取行号（无列）对于可用的源映射是一个很好的折衷。

但减少资产规模可能会对你更好。Webpack的代码分割和块管理选项使得将代码分割成多个文件在运行时异步加载变得非常简单。在这种情况下，您将有两个或更多的JS文件，每个文件都有自己的源映射，因此浏览器将不再阻塞试图处理一个大文件。

Answer 3

这不是对这个问题的回答，但我相信我的回答可以帮助一些人。

这是由于chrome的设置，例如在FF中，不会发生此错误警告。要修复此问题，请转到Chrome的开发者工具设置，然后取消选中：

1. “启用JavaScript源映射”
2. “启用CSS源映射”

然后刷新Chrome。

为了调试js和scss小型文件，这告诉编译器源文件实际上映射在哪里。

使用最新版本的Webpack源代码映射工作正常，我试图重现这个bug，但由于不可能运行项目，我看不出问题作者的问题是什么。

例如，使用angular和sourceMap时出现此警告，应在angular中设置true。json，或者其他方式，如果您不使用source-map'ing，并且不希望看到此警告，请在我的回答后在浏览器中禁用它。