WebPack源代码映射混淆（重复的文件）

我决定尝试WebPack的一个新项目，我今天轮到我从源代码映射出非常奇怪的行为。在文档中我找不到任何关于它的内容，在浏览StackOverflow时也不能找到其他人遇到此问题。WebPack源代码映射混淆（重复的文件）

我目前正在寻找由Vue-CLI's WebPack template生成的HelloWorld应用程序 - 未对代码，构建环境或任何其他内容进行更改。

我安装了一切并运行它，像这样：

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

我sourcemaps看，我看到以下内容：

这是一个炎热的混乱。为什么会有三个版本的HelloWorld.vue和App.vue？更糟糕的是，每个版本都有一个稍微不同的代码版本，它们都不匹配原始源代码。 HellowWorld.vue坐在根目录确实匹配原始源，但它在那里做什么，而不是在./src/components文件夹？最后，为什么没有第四个App.vue有其最初的来源？

据我所知，这可能与WebPack装载机有关。不过，我从来没有得到任何其他捆绑商的这些问题。下面是使用Browserify Vue的-CLI模板完全相同的步骤的例子：（

没有webpack://模式，每个文件的一个副本，该文件实际上包含原始源代码对源图很重要），没有意外的(webpack)/buildin或(webpack)-hot-middleware，没有.子目录，....只是源代码。

来源

2017-10-09 stevendesu

由于缺乏有意义的源地图，使得我的代码调试和诊断问题变得非常困难。例如，我试着让Vuex工作，但我的状态总是空虚。我花了一个小时，无法理解为什么。 – stevendesu

您确定这是一个webpack问题吗？例如，您是否尝试过使用不同的浏览器或更改[源地图]（https://github.com/vuejs-templates/webpack/blob/develop/template/build /webpack.dev.conf.js#L20）类型？可能与热重载/热模块替换有关，它不会触发整页重载（源映射通常由浏览器缓存）。在完整页面重新加载后你能看到很多版本的'HelloWorld.vue'吗？ –

我尝试了其他浏览器，但我没有尝试更改源地图类型。我可以尝试一些并回报。 – stevendesu

我还没有与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装载机是的WebPack加载器，可以改变写成如下格式Vue的组件集成到一个普通的JavaScript模块：

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

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

来源

2017-10-18 18:58:00

这实际上是webpack的一个特性。

webpack有HMR（热模块重新加载）。如果您查看网络选项卡，请继续并更新您的HelloWorld.vue文件。你会看到一个js块通过以及更新的JSON清单。每次您对应用程序进行更改时，这两种方法都会在最后具有唯一的哈希值。它这样做，所以浏览器不必完全重新加载。

对于这一点，我会强烈建议通过https://webpack.js.org/concepts/hot-module-replacement/

来源

2017-10-18 00:25:07 cstls

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

WebPack源代码映射混淆（重复的文件）

回答

相关问题