WebPack源映射令人困惑(重复文件)

Question

我决定尝试一个新项目的WebPack,我今天正在开发,我从源图中得到了非常奇怪的行为.我在文档中找不到任何相关内容,在浏览StackOverflow时也无法找到其他任何人遇到此问题.

我目前正在查看由Vue-CLI的WebPack模板生成的HelloWorld应用程序- 没有对代码,构建环境或任何内容进行任何更改.

我安装了所有东西并像这样运行:

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没有.子目录,....只是源代码.

Answer 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模块：

这就解释了为什么您可能看不到与其他捆绑软件相同类型的行为。

现在，这可能不是您要找的答案，而只是想分享我的发现。