what is the meaning of “pragma style” in webpack?

Question

in the devtool configuration docs they say:

Prefixing @, # or #@ will enforce a pragma style. (Defaults to #, recommended)

what it

Answer 1

To be a bit more explicit about this, the "pragma" being referred to is a sequence of characters that signify metadata to the browser. In this case, the metadata tells the browser where to fetch the source map file, should it decide to load it (e.g., when the user opens the browser dev tools).

As indicated in the link from sirlancelot, the standard format for the pragma is to use a comment of the following form, starting with //#:

//# sourceMappingURL=/path/to/file.js.map

In recent versions of Webpack, if you do not specify a pragma character in your devtool setting, then it defaults to using the # character after the comment characters, as shown above.

In older versions of Webpack though, the pragma character used to default to @, which would result in a comment of the form:

//@ sourceMappingURL=/path/to/file.js.map

Using the //@ form in a recent browser will result in a deprecation warning in the browser console now (in Chrome at least).

If you need to support an older browser, you can override the default pragma by prefixing your devtool setting with the desired character, for example:

devtool: "@source-map"

or set it explicitly to # with:

devtool: "#source-map"

but it's cleanest IMO to just leave out the prefix character and let Webpack add the default by specifying it as:

devtool: "source-map"

Answer 2

Different browsers require different formats for specifying sourcemaps. If your browser isn't showing sourcemaps for webpack'd files, then you can change that option to make it compatible with your browser.