This article covers everything from post-build code to why browsers can see the source map, not the build part.

  • How is the source directory tree generated, and where does the code show up after the build?
  • Where is the code portion of the source code provided after the build?
  • Where is the post-build location mapping between code and source maintained?
  • Let’s take a look at several configurations of WebPack.

The source – the map technology

  • This is browser technology for mapping code locations, that is, requiring browser support

Configuration and principle analysis of Souce-Map for Webpack

  • eval
/ / configuration
devtool: 'eval'.Copy the code
/ / the source code
// config.js
__webpack_public_path__ = window.path + '/';

/ / the effect
/ * * / 3
/ * * * / (function(module.exports, __webpack_require__) {
eval("__webpack_require__.p = window.path + '/'; \n\n//////////////////\n// WEBPACK FOOTER\n// ./src/views/config.js\n// module id = 3\n// module chunks = 0\n\n//# sourceURL=webpack:///./src/views/config.js?");
/ * * * / }),
Copy the code

  1. Eval creates a source-map of the parts of the built code that correspond to the source code. Not the entire dist file
  2. The code in EVAL is built code that is simply executed in EVAL to form an environment for a source-Map
  3. The browser forms a directory tree based on the sourceURL, and the content is the code in Eval
  4. Eval features: Provides the best performance, but it only maps to each module source file, with no row and column information
  5. Conclusion:
  6. Only the sourceURL(generated source directory tree) is provided, and no source code is provided
  • source-map
/ / configuration
devtool: 'source-map'.Copy the code
// effect, a.map file is generated
// Let's look at.map
{
    version:3 / / version number
    sources: []// Source directory tree
    names: []//
    mappings:' ' // Location mapping
    files:' ' // Post build code location
    sourcesContent: []// The source code of the packaged code is translated (understand: this part of the code has the corresponding source code, it will be replaced by the source code, responsible for displaying the source code)
}
Copy the code

  1. The souce-map configuration produces. Map files
  2. The.map file contains a directory tree (sources), source code parsing after the build (sourceContent), and location mappings (Mappings)
  3. Conclusion:
  4. Can generate source directory tree (sources), and source code (sourceContent, mappings), with complete mapping information
  • inline-source-map
/ / configuration
devtool: 'inline-source-map'.Copy the code

  1. The effect is the same as source-map
  2. As opposed to source-map,inline-source-map is, as its name implies,inline, placed at the end of the build code with base, rather than generating a separate.map file
  • eval-source-map
/ / configuration
devtool: 'eval-source-map'.Copy the code
/ / the effect
eval("__webpack_require__.p = window.path + '/'; //# sourceURL=[module]\n//# sourceMappingURL=data:application/json; charset=utf-8; base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvdmlld3MvY29uZmlnLmpzPzZlNDQiXSwibmFtZXMiOltdLCJtYXBwaW5nc yI6IkFBQUEscUJBQXVCIiwiZmlsZSI6IjMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJfX3dlYnBhY2tfcHVibGljX3BhdGhfXyA9IHdpbmRvdy5wYXRoICsgJ y8nO1xuXG5cbi8vLy8vLy8vLy8vLy8vLy8vL1xuLy8gV0VCUEFDSyBGT09URVJcbi8vIC4vc3JjL3ZpZXdzL2NvbmZpZy5qc1xuLy8gbW9kdWxlIGlkID0gM 1xuLy8gbW9kdWxlIGNodW5rcyA9IDAiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///3\n");

// Compare eval to find not only sourceURL, but also sourceMappingURL
Copy the code

  1. SourceURL =webpack-internal generates a directory structure based on the module of the built code => supports module caching
  2. SourceMappingURL. The source directory tree and code will be generated with complete information
  • cheap-source-map
In contrast to source-map, there is no name attribute in the.map file, which is missing part of the functionality: the sourcemap of the Loader is not includedCopy the code

Conclusion: I think there are basically two modes

  • Generate only the directory tree of the source code
On behalf of:evalKey words: sourceURLCopy the code
  • Generate a directory tree of source code, and source code (and mapping)
SourceMappingURL /.mapCopy the code