I have always been ignorant of Source map and confused by the variety of sources provided by Webpack. This time I decided to try out the different source maps one by one

What is a Source map

Modern front-end development is always accompanied by various frameworks. The code developed using these frameworks needs to be compiled before it can be used in production. After compilation, the readability is reduced, which also affects our error debugging. The Source Map is designed to solve this problem.

A Source map can be understood as a map that tells you where the compiled code corresponds to the pre-compiled code. This way, when the code encounters an exception, we can locate it to the correct location by reporting an error message. The source code can also be viewed in browser Sources.

The compiled code only needs to contain this sentence

// @sourcemAppingURL = Map file path
Copy the code

You can then associate the Source map file

devtool

Webpack uses Devtool to control the type of Source map that needs to be generated

If we look at the devtool attribute, we can see that the Source map is also divided into several types, but they are basically different in the form of loading. The core of the source map is the same.

It’s amazing how many of them there are

  • eval
  • eval-cheap-source-map
  • eval-cheap-module-source-map
  • eval-source-map
  • cheap-source-map
  • cheap-module-source-map
  • source-map
  • inline-cheap-source-map
  • inline-cheap-module-source-map
  • inline-source-map
  • eval-nosources-cheap-source-map
  • eval-nosources-cheap-module-source-map
  • eval-nosources-source-map
  • inline-nosources-cheap-source-map
  • inline-nosources-cheap-module-source-map
  • inline-nosources-source-map
  • nosources-cheap-source-map
  • nosources-cheap-module-source-map
  • nosources-source-map
  • hidden-nosources-cheap-source-map
  • hidden-nosources-cheap-module-source-map
  • hidden-nosources-source-map
  • hidden-cheap-source-map
  • hidden-cheap-module-source-map
  • hidden-source-map

I’m starting to panic when I see so much. But don’t be afraid, in fact, we understand the core of a few keywords will be ok.

Take a look at the documentation for these names,

  • Eval -* : Use eval to generate a source map. Instead of generating additional.map files, you append the source map to the eval function. Recommended for development environments because * builds and hot updates are relatively fast.
  • Inline -* : Inline SourceMap into the original file, again no additional.map file is generated.
  • Hidden -* : The addition generates the Source map but does not associate it, that is, it does not add the mapping statement mentioned above to the compiled code.
  • Nosources -* : Sourcemap does not contain source code, but contains accurate error column information to avoid source leakage.
  • Cheap -* : Ignoring column information, source Map only has row mappings, which speeds up packaging
  • Being the module – * : The moudle key must be used with cheap to indicate the mapped stage. If module is not mapped, the code information is mapped before loader processing. If module is added, it is the source code after Loader processing.const a = 1In this line, if you do not add module, you will get the conversion to ES5var a = 1If “module” is added, then “module” is obtainedconst a = 1

With that in mind, look at the list of different types of Source maps above.

What? Still not understand? Let’s try a few typical examples!

We intentionally print undefined variable C in our code to see the error message results under different source maps

Note: Line number is 9

eval

Modify the configuration

First we fill in eval in devTool.

Running the build

Run a run build and see.

You can see the generated result, and the comments above indicate which file it was compiled from. Of course, this is the loading logic of the Webpack, so we can look inside, and inside is an eval function, and inside is the compiled code.

Then we see the end, the end of the eval sourceURL = webpack: / / /. / SRC/views/About. Vue? .

The error message

And then let’s run the project and see what kind of error message it gets.

As you can see, it’s not very clear. If you look at it, you can probably see which file burst, but the line number and so on is completely wrong, and what you click in is also compiled information

For details:

It’s completely compiled code.

This is source map in eval mode. It does not generate the actual.map file, but adds a mapping statement to the end of the eval function, pointing to the local address of the source file, and the debugging experience is poor. Therefore, it cannot be used in production environment.

For clearer error information, use eval-source-map

source-map

The most standard source-map packaging

Modify the configuration:

Run the build:

You can see that many.map files are generated

Entering a JS file, we can see that a.map file is associated with the end of the code

Error message:

You can see that the error location is fairly accurate, we found the correct 9 rows, and then we click on it

Perfect, is our correct source information, and successfully located to the specific column.

inline-source-map

Run the build:

Output without.map file

Source Map data is directly inlined

Error message:

Can locate the line number

For details:

Perfect display, can also be located to the column

nosources-source-map

Run the build:

A. The map file

There is path mapping

Error message:

The line number accurate

For details:

Cannot load without source information

hidden-source-map

Run the build:

A. The map file

No mapped path

Error message:

Error message ambiguity

For details:

It’s completely compiled code

cheap-source-map

Run the build:

A. The map file

Mapped path

Error message:

The line number is incorrect

For details:

Is code that has been processed and is not located to a specific column

cheap-module-source-map

Run the build:

A. The map file

Mapped path

Error message:

The line Numbers correct

For details:

Correct source code, but unable to locate specific columns.

At the end

The key to understanding these differences in the Source Map is to understand what the keywords mean, and the rest is “assembly.”