What is the `webpack://` protocol?

[npetruzzelli]

Per Webpack's issue template:

<!-- Bug reports and Feature requests must use other templates, or will be closed -->
<!-- Please ask questions on StackOverflow or the webpack Gitter (https://gitter.im/webpack/webpack). -->
<!-- Issues which contain questions or support requests will be closed. -->

I originally tried asking this question on StackOverflow, but with no luck. Since the question will likely be deleted, I will copy the contents below:

I downloaded and searched the documentation repository using my text editor for the string webpack://, and found it located in only two documents:

• src/content/configuration/index.md
  • which goes to: https://webpack.js.org/configuration/
• src/content/configuration/output.md
  • which goes to: https://webpack.js.org/configuration/output/

As far as I can tell, this is not an actual protocol, much less one a browser can understand.

Questions:

1. What is the webpack: protocol intended to be used for?
2. Where can I find documentation on it?
3. (assuming it is used internally by webpack or webpack dev server) Why do I see it output in Source Maps or in some project boiler plates, when the browser has no way of understanding what it should do with the protocol?

Update 2018-05-25

I checked Webpack's source code in addition to their documentation repo, and this is what I found:

• https://github.com/webpack/webpack/tree/v4.8.3/examples/source-map/
• lib/EvalDevToolModuleTemplatePlugin.js
• lib/EvalSourceMapDevToolModuleTemplatePlugin.js
• lib/SourceMapDevToolPlugin.js

(Paths instead of links since I lack the reputation to post more than 8)

StackOverflow Comments

I mean that the structure of the source URL in a sourcemap is meaningless to tooling. ie, the protocol doesn't matter. – SLaks May 25 at 15:17

... The protocol shouldn't matter, but for some reason it does, especially when the final sourcemap includes this as a protocol. The browser has no way of understanding a webpack:// URL. It shows up in the links above and in Angular CLI ( github.com/angular/angular-cli/blob/1.7.x/packages/%40angular/… ) when you eject a configuration (I'm currently on 1.7.4, they recently made the jump from 1.x to 6.x, which temporarily removes "eject"). I'd like to know why the webpack and angular teams use it. – nick May 25 at 16:27

---

Since Angular CLI also uses/used the webpack:// protocol, is there anyone here who might be able to explain it to me?

Thanks and regards.

[noscripter]

It is a custom protocol used in webpack source map, you can customize it by checking out this doc: https://webpack.js.org/configuration/output/#output-devtoolmodulefilenametemplate

[npetruzzelli]

Thank you for your response. I am already aware that it is configurable.

My goal is to understand what it does for source maps in the context of Webpack. Outside of webpack it is an unknown/invalid URI scheme. I am looking at contributing to a number of existing webpack plugins with the goal of getting source maps to behave in an expected way. Currently, there are scenarios where it does not.

Does the webpack:// scheme have more to do with webpack-dev-server than webpack? How is it used? What does it do behind the scenes?

These are the questions I'm trying to understand as a developer writing software that generates source maps, not as a developer simply using source maps as a debugging tool.

[vanmxpx]

how can i override devtoolModuleFilenameTemplate in angular.json? Since i cannot eject webpack config from angular project i need to rewrite this option in angular.json. This option generate many troubles while debugging in chrome or firefox.

[npetruzzelli]

@vanmxpx - Your problem doesn't seem to be related to the original topic of this issue, you may be better served opening a new issue to get the correct attention on it. You may also find the following helpful:

https://github.com/angular/angular-cli/blob/v6.0.7/docs/documentation/config.md

Though, I don't know if that applies to webpack configuration under the hood.

Since the docs note that eject is temporarily disabled, I imagine they are aware of it and already have an issue open for resolution in the future.

[vanmxpx]

@npetruzzelli I have create the issue, but still quite. Thank you for response and for ng config, might be helpful.

[npetruzzelli]

You're welcome, and good luck!

[alan-agius4]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}