[Webpack] 7 kinds of sourcemap[in Devtool)

Eval

WEBPACKJSONP ([1],[  function(module,exports,__webpack_require__) {eval ( ...//# sourceurl=webpack:///./src/js/index.js? '    )  },  function(module,exports,__webpack_require__) {eval ( ...//# sourceurl=webpack:///./src/static/css/app.less? /~/.npminstall/css-loader/0.23.1/css-loader!. /~/.npminstall/postcss-loader/1.1.1/postcss-loader!. /~/.npminstall/less-loader/2.2.3/less-loader '    )  },  function(module,exports,__webpack_require__) {eval ( ...//# SOURCEURL=WEBPACK:///./SRC/TMPL/APPTEMPLATE.TPL? "    )  },...])

This is straightforward, as the concept in the above table says, the eval pattern wraps each module into eval and adds comments at the end.

Source-map

WEBPACKJSONP ([1],[  function(e,t,i) {...},  function(e,t,i) {...},   function (e,t,i) {...},   function (e,t,i) {...},  ...]) // # Sourcemappingurl=index.js.map

At the same time, you will find a file in your output directory index.js.map .

We can format this to make it index.js.map easier for us to compare the following observations:

{  "version": 3,  "Sources": [    "Webpack:///js/index.js",    " Webpack:///./src/js/index.js ",    " webpack:///./~/.npminstall/css-loader/0.23.1/css-loader/lib/ Css-base.js ",    ...  ],  " names ": [" Webpackjsonp "," module "," Exports "...],  "Mappings": "Aaaaa,caac,iaer,saasc ...",  "file": "Js/index.js",  " Sourcescontent ": [...]  ," SourceRoot ":" "}

About Sourcemap column information how to map the details of the source code, here is not our focus on the topic of discussion, withheld.

Interested students can refer to Nanyi Teacher's popular science text: JavaScript Source Map Detailed

Hidden-source-map

WEBPACKJSONP ([1],[  function(e,t,i) {...},  function(e,t,i) {...},   function (e,t,i) {...},   function (e,t,i) {...},  ...])

The end comment is less than the source-map, but index.js.map there is no less in the output directory

Inline-source-map

WEBPACKJSONP ([1],[  function(e,t,i) {...},  function(e,t,i) {...},   function (e,t,i) {...},   function (e,t,i) {...},  ...]) // # sourcemappingurl=data:application/json;charset=utf-8;base64,eyj2zxjzaw9 ...

You can see the end of the comment sourcemap as a dataurl form is embedded into the bundle, because all the information Sourcemap is added to the bundle, the entire bundle file becomes gigantic.

Eval-source-map

WEBPACKJSONP ([1],[  function(module,exports,__webpack_require__) {eval ( ...//# sourcemappingurl=data:application/json;charset=utf-8;base64,...    )  },  function(module,exports,__webpack_require__) {eval ( ...//# sourcemappingurl=data:application/json;charset=utf-8;base64,...    )  },    function(module,exports,__webpack_require__) {eval ( ...//# sourcemappingurl=data:application/json;charset=utf-8;base64,...    )  },  ...]);

Similar to eval, but changed the sourcemap in the notes to Dataurl.

Cheap-source-map

And Source-map produces the same result. Content in the output directory index.js .

However, the content generated by Cheap-source-map is much less than that generated by Source-map, and index.js.map index.js.map We compare the results generated by the source-map above, and find that the index.js.map Source property contains less column information and only one .

// Index.js.map {  "version": 3,  "file": "Js/index.js",  "sources": ["Webpack:///js/index.js "],  " Sourcescontent ": [...],  " mappings ":" AAAA ",  " sourceroot ":" "}

Cheap-module-source-map

// Index.js.map {  "version": 3,  "file": "Js/index.js",  "sources": ["Webpack:///js /index.js "],  " mappings ":" AAAA ",  " sourceroot ":" "}

Under Cheap-module-source-map sourcemap content less, sourcemap column information is reduced, you can see Sourcescontent also No.

Which is good for so many models?

Development Environment Recommendation:

Cheap-module-eval-source-map

Production Environment Recommendation:

Cheap-module-source-map (This is also the default option for the next version of Webpack when you start debug mode with the-D command)

The reasons are as follows:

1. Using cheap mode can greatly improve the efficiency of souremap generation. In most cases we do not care about column information, and some browser engines (such as V8) give out information even if the Sourcemap is not listed.
2. Using the Eval method can greatly improve the efficiency of continuous construction. Refer to the Speed comparison table provided in the official documentation to see how fast the eval mode compiles.
3. Use the module to support Babel, a pre-compilation tool (used in webpack as loader).
4. Use Eval-source-map mode to reduce network requests. This mode of opening Dataurl itself contains complete sourcemap information and does not require the browser to send a complete request to get Sourcemap files, as sourceURL, which slightly increases the efficiency of the point. In the production environment, it is not appropriate to use Eval, which will make the file greatly.

Sourcemap Mode Efficiency Comparison chart

Reprint Address:

https://juejin.im/post/58293502a0bb9f005767ba2f

[Webpack] 7 kinds of sourcemap[in Devtool)