WebPack sourcemaps 令人困惑（重复文件）答案

【问题标题】：WebPack sourcemaps confusing (duplicated files)WebPack sourcemaps 令人困惑（重复文件）
【发布时间】：2018-03-21 03:15:39
【问题描述】：

我决定在我今天正在启动的一个新项目中尝试 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:// 架构，每个文件只有一个副本，这些文件实际上包含原始源代码（对源映射很重要），没有意外@ 987654334@或(webpack)-hot-middleware，没有.子目录，....只是源代码。

【问题讨论】：

缺乏有意义的源映射使得调试和诊断代码问题变得异常困难。例如，我尝试让 Vuex 工作，但我的状态总是空的。我花了一个小时才开始明白为什么。
你确定这是一个 webpack 问题吗，你有没有尝试过，例如，使用不同的浏览器或更改 source map 类型？可能与热重新加载/热模块更换有关，这不会触发整个页面重新加载（源地图通常由浏览器缓存）。重新加载整页后，你能看到HelloWorld.vue 的多个版本吗？
我尝试过其他浏览器，但没有尝试更改源地图类型。我可以尝试一些并报告。
我刚试过source-map、inline-source-map、cheap-source-map、inline-cheap-module-source-map和eval。尽管来自eval 的源映射更好，但它们仍然存在许多相同的问题，包括每个源文件都有 3-4 个版本。我会尝试禁用热重载，看看是否有帮助。
我禁用了热模块重新加载，只是使用源映射进行了标准构建——同样奇怪的输出。

标签： javascript node.js webpack webpack-dev-server source-maps

【解决方案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 模块：

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

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

【讨论】：

【解决方案2】：

这其实是 webpack 的一个特性。

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

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

【讨论】：

我很清楚 Hot Module Reloading 是 WebPack 的一个特性。然而，这个问题不是关于热模块重新加载，而是关于 WebPack 生成的源映射如何毫无意义。当我使用外部源映射（没有热模块重新加载）编译我的生产代码时，我仍然得到这样的不可读的源映射。