javascript - WebPack sourcemaps 令人困惑(重复文件)

Question

我决定在我今天正在启动的一个新项目中尝试 WebPack，我从源映射中得到了非常奇怪的行为。我在文档中找不到任何关于它的内容，在浏览 StackOverflow 时也找不到其他人遇到此问题。

我目前正在查看 Vue-CLI's WebPack template 制作的 HelloWorld 应用程序。 -- 没有对代码、构建环境或任何东西进行任何更改。

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

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

查看我的源 map ，我看到以下内容:

这是一团糟。为什么会有三个版本的HelloWorld.vue和App.vue？更糟糕的是，每个版本的代码版本都略有不同，而且没有一个与原始源代码相匹配。 HellowWorld.vue 位于根目录 确实 匹配原始源，但它在下面做什么而不是在 ./src/components 文件夹？最后，为什么没有第四个 App.vue 有它的原始来源？

据我所知，这可能与 WebPack 加载器有关。不过，我从来没有在任何其他 bundler 上遇到过这类问题。以下是使用 Browserify Vue-CLI 模板的完全相同步骤的示例:

没有 webpack:// 架构，每个文件只有一个副本，这些文件实际上包含 原始源代码(有点重要对于源映射)，没有意外的 (webpack)/buildin 或 (webpack)-hot-middleware，没有 . 子目录，....只是源代码。

Answer 1

我没有使用过 Vue，所以无法真正描述这是如何发生的，但它似乎与 Vue Loader 相关。 .查看文档，我并没有真正找到任何东西来解释为什么它会为一个组件创建三个不同的文件。但考虑到 .vue 似乎是合乎逻辑的。文件可能包含三种顶级语言 block :<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

document也这样说:

vue-loader is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module:

这解释了为什么您在其他捆绑程序中可能看不到相同类型的行为。

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