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/ponents 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.

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/ponents 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.

• javascript
• node.js
• webpack
• webpack-dev-server
• source-maps

• The lack of meaningful source maps has made it incredibly difficult to debug and diagnose issues with my code. For instance, I tried getting Vuex to work but my state is always ing up empty. I spent an hour and couldn't begin to understand why. – stevendesu Commented Oct 10, 2017 at 16:54
• Are you sure this is a webpack issue, have you tried, for example, using a different browser or changing the source map type? Could be related to hot reloading / hot module replacement, which doesn't trigger a full page reload (source maps are typically cached by the browser). Can you see many versions of HelloWorld.vue after a full page reload? – Paolo Moretti Commented Oct 11, 2017 at 20:47
• I have tried other browsers, but I have not tried changing the source map type. I can try a few and report back. – stevendesu Commented Oct 11, 2017 at 20:50
• 1 I just tried source-map, inline-source-map, cheap-source-map, inline-cheap-module-source-map, and eval. Although the source maps from eval were better, they still suffered a lot of the same issues, including have 3-4 versions of every source file. I'll try disabling hot reloading to see if that helps. – stevendesu Commented Oct 11, 2017 at 20:56
• 1 I disabled hot module reloading and just did a standard build with source maps -- same bizarre output. – stevendesu Commented Oct 11, 2017 at 20:57

2 Answers 2

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 ponent. 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 ment 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-piler

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 documentation also says this:

vue-loader is a loader for Webpack that can transform Vue ponents 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.

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 e 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 remend reading through https://webpack.js/concepts/hot-module-replacement/