WebPack sourcemaps 混乱（重复文件）

Question

我决定在我今天启动的一个新项目上试用 WebPack，并且我从 sourcemaps 中得到了真正的 st运行ge 行为。我在文档中找不到任何相关信息，在浏览 Whosebug 时也找不到其他人遇到这个问题。

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

我安装了所有东西运行它是这样的：

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

查看我的源地图，我看到以下内容：

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

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

无webpack://架构，每个文件只有一份，文件实际包含原始源代码（种类对于源映射很重要），没有意外的 (webpack)/buildin 或 (webpack)-hot-middleware，没有 . 子目录，....只有源代码。

Answer 1

这其实是webpack的一个特性。

webpack 有 HMR（热模块重新加载）。如果您查看网络选项卡，请继续更新您的 HelloWorld.vue 文件。您会看到一个 js 块以及一个更新的 JSON 清单。每次您对应用程序进行更改时，这两者的末尾都会有一个唯一的哈希值。它这样做是为了让浏览器不必完全重新加载。

为了更好地解释这一点，我强烈建议通读 https://webpack.js.org/concepts/hot-module-replacement/

Answer 2

我没有使用过 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

document 也是这样说的：

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

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

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

WebPack sourcemaps 混乱（重复文件）

WebPack sourcemaps confusing (duplicated files)

javascript

node.js

webpack

webpack-dev-server

source-maps