WebPack sourcemaps запутывает (дублирует файлы)

Я решил попробовать WebPack в новом проекте, над которым я сейчас вращаюсь, и я получаю действительно странное поведение из исходных карт. Я не могу найти ничего об этом в документации, а также не могу найти кого-либо еще, имеющего эту проблему, при скроении StackOverflow.

В настоящее время я смотрю приложение HelloWorld, созданное Vue-CLI WebPack template - никаких изменений в код не внесено, строить среду или что-то еще.

Я установил все и запускал его так:

vue init webpack test && cd test && npm install && npm run dev

Посмотрев на мои исходные карты, я вижу следующее:

Это горячий беспорядок. Почему существует три версии HelloWorld.vue и App.vue? Хуже того, каждая версия имеет немного отличающуюся версию кода, и ни один из них не соответствует исходному источнику. HellowWorld.vue, сидящий в корневом каталоге , выполняет совпадение с исходным исходным кодом, но что он делает там, а не в папке ./src/components? Наконец, почему нет четвертого App.vue, у которого есть исходный источник?

Насколько я могу судить, это может иметь какое-то отношение к загрузчикам WebPack. Тем не менее, я никогда не получал таких проблем с любым другим поставщиком. Ниже приведен пример тех же самых шагов с использованием шаблона Browserify Vue-CLI:

Нет webpack://, только одна копия каждого файла, файлы на самом деле содержат исходный код (тип важного для исходных карт), никаких неожиданных (webpack)/buildin или (webpack)-hot-middleware, no .,... только исходный код.

Ответ 1

Я не работал с Vue, поэтому не могу описать, как именно это происходит, но похоже, что оно связано с Vue Loader, Глядя на документацию, я действительно не нашел ничего, что бы разъясняло, почему оно создало бы три разных файла для одного компонента. Но логично считать, что файл .vue может содержать три типа языковых блоков верхнего уровня: <template>, <script> и <style>.

Кроме того, глядя на два из этих файлов, вы видите комментарий в конце каждого файла, который предполагает, что он каким-то образом был изменен загрузчиком Vue. Либо это

//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-loader/lib/template-compiler

или

//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-style-loader!./node_modules/css-loader

Третий файл отличается, но у него все еще есть код, который идентифицирует его как измененный загрузчиком Vue. Вот некоторые из этого кода

function injectStyle (ssrContext) {
  if (disposed) return
  require("!!vue-style-loader...")
}
/* script */
import __vue_script__ from "!!babel-loader!../../node_modules/vue-loader/..."
/* template */
import __vue_template__ from "!!../../node_modules/vue-loader/..."
/* styles */
var __vue_styles__ = injectStyle

В документе также говорится следующее:

vue-loader является загрузчиком для Webpack, который может преобразовывать компоненты Vue, написанные в следующем формате, в простой модуль JavaScript:

Это объясняет, почему вы не можете видеть тот же тип поведения с другими связями.

Теперь, это может быть не тот ответ, который вы искали, а просто хотел поделиться тем, что я нашел.

Ответ 2

На самом деле это особенность webpack.

webpack имеет HMR (перезагрузка Hot Module). Если вы заглянете в свою сетевую вкладку, сделайте обновление в своем файле HelloWorld.vue. Вы увидите кусок js, а также обновленный манифест JSON. Оба они будут иметь уникальный хеш в конце каждого раза, когда вы вносите изменения в приложение. Он делает это, чтобы браузер не выполнял полную перезагрузку.

Для лучшего объяснения этого я настоятельно рекомендую читать через https://webpack.js.org/concepts/hot-module-replacement/