无法在Chrome源代码选项卡中加载Webpack源文件的内容

7eumitmz 于 2022-11-13 发布在 Webpack

关注(0)|答案(3)|浏览(395)

我使用webpack v4.16.2作为我的捆绑包工具，并将devtool设置为'source-map'。我试图通过Chrome源代码选项卡调试源文件。然而，当我点击源文件位于webpack://目录下时，发生了一个错误：

我没有使用webpack-dev-server，只是将源文件构建到dist/文件夹中，并通过Nginx加载页面。
这个错误是什么意思？我很确定源Map文件已经生成了。我该如何修复这个错误？
先谢谢你。

3条答案

我这一整天都在想同一个问题：
尝试设置webpack.prod.config

optimization: {
    minimize: false
  }

以下是我目前的发现：

source-map* devtool模式生成.map文件时，在缩小production模式下默认的代码时丢失了sourcesContent属性。使用“webpack：//XXXX”定位原始代码所在的sourcesContent时，会发生错误。

我得到了完全相同的问题，相同的错误信息等时，试图调试typescript / html在谷歌浏览器。
解决方法是清空缓存。
按Ctrl + H加载浏览器历史记录，然后按“清除数据”按钮。
然后尝试按Ctrl + O或Ctrl + P再次加载/选择源文件。

亚历克斯是对的，
source-map devtool模式生成.map文件当在生产模式下缩小代码时，文件丢失sourcesContent属性。
另一种修复方法是在Chrome开发工具中取消选中Enable JavaScript source maps。x1c 0d1x