如何在Chrome开发工具中区分同名的VueJS + WebPack模块？

Question

我正在开发一个VueJS捆绑了WebPack 4的应用程序。它有许多 CRUD 模块，每个模块都有一个目录，但每个模块都有相同的命名文件。所以...

components
  ╠═ Person
  ║   ╠═ index.js
  ║   ╠═ Create.vue
  ║   ╠═ Update.vue
  ║   ╠═ Retrieve.vue
  ║   ╚═ Delete.vue
  ╠═ Tool
  ║   ╠═ index.js
  ║   ╠═ Create.vue
  ║   ╠═ Update.vue
  ║   ╠═ Retrieve.vue
  ║   ╚═ Delete.vue
  ╚═ Zone
      ╠═ index.js
      ╠═ Create.vue
      ╠═ Update.vue
      ╠═ Retrieve.vue
      ╚═ Delete.vue

我的问题是，当我去Create.vue, Update.vue, Retrieve.vue, Delete.vue进行调试时，我只能找到Chrome Dev Tools中的每一个。

如果将console.log()放在Tool/Update.vue中，我可以在Chrome控制台中看到记录的消息，但是当我单击源代码引用（在右侧）时，显示的代码是来自Person/Update.vue。

我完全看不到在正确的模块中设置断点的方法。

我是否必须重构整个项目以始终使用不同的名称？ 是否存在WebPack设置来强制使用名称间隔？

作为一种变通办法，我将Tool/Update.vue临时重命名为Tool/dbgUpdate.vue，修复了对它的所有引用，然后找到并调试了它。

更新时间：2018-11-30

我关注了Nandiin Bao的entirely valid suggestion，但没有得到相同的结果，相反，我得到了：

没有一个文件精美打印类似于源代码。

仅在以下位置找到做文件的文件：

但是每个都只有一个，所以我又回到了同样的问题。

我的webpack配置是vue-cli 3

生成的默认值

Answer 1

您可以在devtool的Page标签下的Source子标签下访问具有人类可读文件层次结构的中间文件。