Preface:

Hahaha, I come again, today xiaobian to share with you is the webpack source-map. Many of you are familiar with Sourcemap, but today I’m going to tell you about sourcemap classification and its use

concept

Sourcemap was developed to solve the problem of inconsistencies between the developed code and the actual running code, and to help us debugger to the original code

The classification

  1. Source-map Generates a. Map file
  2. Eval code uses EVAL wrapping
  3. Inline inserts a. Map file as a DataURI, does not generate a. Map file separately
  4. The Sourcemap of the Loader contained in the Module is easy to map to before code conversion
  5. Cheap does not contain column information nor does it contain the Sourcemap of the Loader

Common examples:

  1. Source-map raw code with the best sourcemap quality has complete results, but is slow
  2. Eval-source-map source code has the highest quality and lowest performance
  3. The eval-cheap-module-source-map raw code has the highest quality and lower performance in the line
  4. Eval generated code Every module is executed by eval, and @sourceURL exists. Build mode with EVAL can cache SourceMap
  5. The Sourcemap generated by the cheap-source-map transformation code (inline) has no column mapping, and the Sourcemap generated from loaders is not used
  6. Cheap-module-source-map the original code (inline only) is the same as above except that each line characteristic is mapped from the Loader

The best combination

  1. {eval-cheap-module-source-map}
  2. In production we actually need sourcemap. In order to reduce the volume, we can’t upload, but we need to debug when something goes wrong so we can go to {cheap-module-source-map}.

The results

Source code analysis

This is webpack packed running results have written comments to you, considering that we are easy to write words, so direct code to add comments

Lots more to come. Please pay attention to it