Where does this `webpack://` come from for `webpack-dev-middleware`?

Ad

I'm using https://github.com/gaearon/react-transform-boilerplate.

When I view the source code in Chrome, I saw a source is called webpack:// (see the picture below)

enter image description here

However, when I access the URL such as webpack:///src/App.js?14b1. I find the file is not accessible.

Does anyone have ideas about where does this webpack:// sources come from?

Ad

Answer

Ad

This the result of webpack sourcemaps having been resolved in the browser.

Source maps provide a mapping between bundled and unbundled code. By convention, webpack sourcemaps places a webpack:// to namespace a resolved piece of unbundled code.

Once the webpack sourcemaps are produced (usually a file named <name>.js.map), you can open the .js.map file and see that values in the the sources property are prefixed with webpack://. This is the source root for sourcemaps configured by webpack.

Ad
source: stackoverflow.com
Ad