Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

What

SourceMap, which stands for source code map,

Front-end engineering modular, the code needs to be packaged operation, the original source code after compilation, compression, etc. “baptism”, has long been “unrecognizable”

What it does: Map the converted code and the relationship between the source code, is a source code and converted code mapping file

Why

Consider: Why do WE need SourceMap?

Known: There are differences between the code you write at development time and the code you actually run

A code error occurred when the build ran after development (note: based on the built code)

Without SourceMap, errors are reported based on compiled code and cannot be located

SourceMap is good for debugging and handling errors

How

The principle of

How does SourceMap map raw code to compiled code

Configuration in Webpack: devTool

Does this option control whether and how the Source map is generated

Default: string = ‘eval’ (development mode) false (production mode)

According to the official website, the following figure can be obtained:

With source-Map, there are 27 modes

The quality of

  • Packaged code: All generated code is treated as one block of code, and modules are not separated from each other

  • Generated code: Each module is isolated and annotated with the module name to see the code generated by WebPack

  • Converted code: Each module is separated from each other and annotated with the module name. You can see the code before webPack conversion and after Loader translation

  • Original source code: Each module is isolated and annotated with the module name. You can see the code before translation (when written), depending on loader support.

  • Row/row & column: only row mappings/row and column mappings are available

Model name

  • Inline -* : The map compiles in Base64 format instead of creating a separate map file

  • Hidden -* : No reference to SourceMap is added

  • Eval -* : Generate SourceMap for each module through EVAL, recommended for development

  • Nosources -* : The map does not contain source code. This is useful when you need to reference the original file

  • Cheap -*: Because only row mappings are provided, column mappings are not displayed

  • Moudule -*: The parsed source code is not processed by Loader, and the mapping to Loader SourceMap is added

    Note: without module mode, the parsed source code will be processed by Loader

The sample

Just look at the theory of fog, select part of the different model name, on demo:

// src/demo.js
console.log('Source Map');

console.lg('Webpack Devtool');
Copy the code

Corresponding WebPack configuration:

 devtool: 'source-map'.// Subsequent changes
 entry: "./src/demo.js".Copy the code

source-map

Package: A map file is generated

run

eval-source-map

Packaging: Visible modules are executed using eval() and do not generate map files

Run: same as inline-source-map, base64 encoding

cheap-source-map

Packaging: The generated map file is slightly smaller than the source-map mode

Run: same as source-map

inline-source-map

Packaging: Instead of generating map files (which do not exist as physical files), map files are encoded in Base64 format with maximum size (base64 causes larger size)

Run: same as source-map

hidden-source-map

Package: A map file is generated

Run: In developer tools, although map file is generated, SourceMap effect is not seen (that is, no reference to SourceMap is added)

nosources-source-map

Packaging: A map file is generated, which is only about 600KB

Run: In developer tools, source code cannot be viewed (without exposing source code)

recommended

In short, Webpack’s SourceMap schema is varied and needs to be flexibly selected according to requirements. The official list of recommendations is as follows:

The development environment

For development environments, SourceMap, which is usually expected to be faster, needs to be added to the bundle at the expense of increasing volume

  • eval-source-map (Best quality SourceMa for development environment, easy to debug)
  • eval
  • eval-cheap-source-map
  • eval-cheap-module-source-map

The production environment

For production environments, SourceMap, which is expected to be more precise, needs to be separated from the bundle and exist independently

  • Don't set(Not generating SourceMap, good choice)
  • source-map
  • hidden-source-map
  • Nosource-source-map (protect source code)

Link portal

# What is SourceMap? Talk about the SourceMap eating posture

# Webpack: Devtool

How to configure best practices for Webpack SourceMap

Last but not least

If there is anything wrong, please give me your advice