Question

我决定尝试使用WebPack来处理今天我正在开发的新项目，我从源图中得到了非常奇怪的行为。我在文档中找不到任何相关内容，在浏览StackOverflow时也找不到其他人。

我目前正在查看由Vue-CLI's WebPack template生成的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

document也说明了这一点：

vue-loader是Webpack的加载器，可以将以下格式编写的Vue组件转换为纯JavaScript模块：

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

现在，这可能不是你想要的答案，只是想分享我找到的东西。

Answer 2

这实际上是webpack的一个功能。

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

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

WebPack源映射令人困惑（重复文件）

2 个答案: