Issue 1:
Bug report

What is the current behavior?

import.meta.url is replaced by the current file location at the build time.

https://github.com/webpack/webpack/blob/main/lib/dependencies/ImportMetaPlugin.js#L99

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

If you build

console.log(import.meta.url)

it will ouput a constant string (le location of the file on the current system).

This is problematic to build a project using yargs (https://github.com/yargs/yargs), as it uses meta.import.url (https://github.com/yargs/yargs/blob/main/lib/platform-shims/esm.mjs#L18).

When building under an Unix file system, meta.import.url is replaced by something like file:///path/to/your/project/src/index.js. When trying to run the built code under a Windows filesystem, a TypeError [ERR_INVALID_FILE_URL_PATH]: File URL path must be absolute is thrown, as the filename doesn't contain file://C:/....

Making the meta.import.url variable dynamic (based on __dirname) should solve the problem.

What is the expected behavior?

import.meta.url should be based on __dirname for cjs build, to keep the original intended behavior of the application developer.

Other relevant information:

webpack version: 5.58.1

Node.js version: 16.10.0

Operating System: Ubuntu Linux 20.04

Additional tools: yargs

Issue 2:
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