Bug report

What is the current behavior?

When configuring an entry point like this:

module.exports = {
  entry: './path/to/my/entry/file.js',
};

The source map in dev mode will have urls like this: webpack://project-server/./resources/js/MyPage.js

But vue files in the same project have urls like this: webpack://project-server/resources/js/AnotherPage.vue

Notice that the vue paths are not prefixed with ./.

This splits the sources in the dev tool to two separate folder, which makes it hard to find while debugging.

I have tried multiple entry combinations, but could not get this to behave.

For those interested in a workaround, here it is:

  output.devtoolModuleFilenameTemplate = opts => {
      return `webpack://${opts.namespace}/${opts.resourcePath.startsWith('./') ? opts.resourcePath.substr(2) : opts.resourcePath}`;
  };
  output.devtoolFallbackModuleFilenameTemplate = opts => {
      return `webpack://${opts.namespace}/${opts.resourcePath.startsWith('./') ? opts.resourcePath.substr(2) : opts.resourcePath}?${hash}`;
  };

If the current behavior is a bug, please provide the steps to reproduce.

Any simple project with both js and vue will demonstrate the issue. Although just a simple js project will also demonstrate it, as the paths should not contain ./ in them anyway.

What is the expected behavior?

Paths should be normalized (no ./ or ../ in the path), or at least behave in a consistent way across all modules.

I am not entirely sure if paths are not normalized, or if they are actually normalized and this line options.moduleFilenameTemplate || "webpack://[namespace]/[resourcePath]"; in SourceMapDevToolPlugin.js is just too simple.

Even though there is a workaround, I think that this should be fixed for everyone from the ground up.

Other relevant information: webpack version: 5.38.1 Node.js version: 14.5.4 Operating System: Windows 10 Additional tools: webpack-dev-server v4.0.0-beta.3, webpack-cli v4.6.0