WebPack源地图混淆（重复的文件）
我决定尝试一下我今天轮到的一个新项目WebPack，我从源代码中得到了非常奇怪的行为。 在文档中找不到任何关于它的内容，在浏览StackOverflow时也不能find其他人。
我目前正在查看由Vue-CLI的WebPack模板生成的HelloWorld应用程序 – 没有对代码，构build环境或其他任何内容进行更改。
我安装了一切，像这样运行：
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:// schema，每个文件只有一个副本，这些文件实际上包含了原始的源代码 （对于源地图很重要），没有意外的(webpack)/buildin或者(webpack)-hot-middleware ，没有. 子目录，….只是源代码。
我没有使用Vue，所以无法真正描述这是如何发生的，但它似乎与Vue Loader有关 。 查看文档，我没有find任何说明为什么它会为一个组件创build三个不同的文件。 但是，考虑到.vue文件可能包含三种types的顶级语言块： <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
该文件还说这个：
vue-loader是一个Webpack的加载器，可以将以下格式编写的Vue组件转换为普通的JavaScript模块：
这就解释了为什么你可能不会看到与其他打包商相同types的行为。
现在，这可能不是你正在寻找的答案，而只是想分享我发现的东西。
这实际上是webpack的一个function。
webpack有HMR（热模块重新加载）。 如果您查看networking选项卡，请继续并更新您的HelloWorld.vue文件。 你会看到一个js块通过以及更新的JSON清单。 每次你对应用程序进行更改时，这两者都会在最后有一个唯一的散列。 它这样做，所以浏览器不必做一个完整的重新加载。
为了更好地解释这一点，我强烈build议通过https://webpack.js.org/concepts/hot-module-replacement/阅读