WebPack sourcemaps confusing (duplicated files)

Question

I decided to try out WebPack on a new project I'm spinning up today and I'm getting really strange behavior from the sourcemaps. I can't find anything about it in the documentation, nor can I find anyone else having this issue when skimming StackOverflow.

I'm currently looking at the HelloWorld app produced by Vue-CLI's WebPack template -- no changes have been made to the code, the build environment, or anything.

I installed everything and ran it like so:

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

Looking at my sourcemaps, I see the following:

This is a hot mess. Why are there three version of HelloWorld.vue and App.vue? Worse yet, each version has a slightly different version of the code and none of them match the original source. The HellowWorld.vue sitting in the root directory does match the original source, but what's it doing down there instead of in the ./src/components folder? Finally, why isn't there a fourth App.vue that has the original source for it?

As far as I can tell this may have something to do with the WebPack loaders. I've never gotten these kinds of issues with any other bundler, though. Below is an example of the exact same steps using the Browserify Vue-CLI template:

No webpack:// schema, only one copy of every file, the files actually contain the original source code (kind of important for source maps), no unexpected (webpack)/buildin or (webpack)-hot-middleware, no . subdirectory,.... just the source code.

Answer 1

I haven't worked with Vue so can't really describe how exactly this is happening but it seems to be related to Vue Loader. Looking at the documentation I did not really find anything that clarifies why it would create three different files for one component. But it does seem logical considering that a .vue file might contain three types of top-level language blocks: <template>, <script>, and <style>.

Also, looking at two of those files you do see a comment at end of each file that suggests it was modified in some way by a Vue loader. Either this

//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-loader/lib/template-compiler

or

//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-style-loader!./node_modules/css-loader

The third file is different but it still does have code that identifies it as being modified by Vue loader. Here is some of that code

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

The document also says this:

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

Which explains why you might not see the same type of behaviour with other bundlers.

Now, This might not be the answer you were looking for but just wanted to share what I had found.

Answer 2

This is actually a feature of webpack.

webpack has HMR (Hot Module Reloading). If you look in your network tab, go ahead and make an update to your HelloWorld.vue file. You'll see a js chunk come thru as well as an updated JSON manifest. Both of these will have a unique hash at the end for each time you make a change to the application. It does this so the browser does not have to do a full reload.

For a better explanation of this I would highly recommend reading through https://webpack.js.org/concepts/hot-module-replacement/