Как отличить модули VueJS + WebPack с одинаковыми именами в Chrome Dev Tools?

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() in Tool/Update.vue Я вижу зарегистрированное сообщение в консоли Chrome, но когда я нажимаю ссылку на исходный код (справа), отображается код от Person/Update.vue.

Iвообще не вижу способа установить точку останова в правильном модуле.

Нужно ли реорганизовывать весь мой проект, чтобы всегда использовать разные имена?Есть ли в WebPack параметр для принудительного использования интервала имен?

В качестве временного решения я временно переименовываю Tool/Update.vue в Tool/dbgUpdate.vue, исправляю все ссылки на него, а затем я могу найти его и отладить.

Обновление: 2018-11-30

Я следовал полностью действительному предложению Нандиин Бао , но я не получаю тот же результат, Вместо этого я получаю:

Ни один из этих файлов красивые отпечатки на что-либо похожее на исходный код.

Единственныйфайлы, которые делают похожи на исходный код, находятся здесь:

Но есть только один из них, поэтому як этой же проблеме.

Моя конфигурация веб-пакета - это неизменное значение по умолчанию, созданное vue-cli 3

Answer 1

Вы можете получить доступ к промежуточным файлам с понятной для человека иерархией файлов на вкладке Page на вкладке Source в devtool.