The Sourcemap in Webpack

Configuration of Sourcemap in Webpack

Sourcemap is a technique that helps us debug to the original development code when the development code is inconsistent with the actual running code. In particular, most of the code in front-end development has been compiled, packaged, and converted into engineering. For example, in the development environment with SCSS write style, want to edit CSS in the browser online editing scss is not so easy. From the data I have read, the concept of Sourcemap first appeared in 12, and jquer1.9 was the library that supported Sourcemap earlier. This blog is more representative: Introduction to JavaScript source Maps, Nanyi's article JavaScript source Map detailed also a lot of reference to the blog. About the principle and function of sourcemap, basically in these two articles to explain clearly. Back to the Webpack in the Sourcemap, on my days of pondering, this information is relatively fragmented, any search webpack sourcemap configuration, can always get the following information:
Sourcemap Type quality Notes

Eval: Generate code Each module is executed by Eval, and there are @sourceurl

Cheap-eval-source-map: Conversion code (inline) Each module is executed by Eval, and Sourcemap as a dataurl of eval

Cheap-module-eval-source-map: The original code (only in line) is the same, but the higher quality and lower performance

Eval-source-map: The original code is the same, but the highest quality and lowest performance

Cheap-source-map: The sourcemap generated by the conversion code (inline) does not have a column map, Sourcemap generated from loaders is not used

Cheap-module-source-map: The original code (only in line) is mapped from loader as above except for the characteristics of each line

Source-map: The best sourcemap quality of the original code has a complete result, but it will be slow

Official documentation for the configuration of Devtool in Webpack in this: Webpack-devtool

Questions

Anyway I read these instructions is foggy, as far as I am concerned, there are 3 questions:

1. What does Eval have to do with Sourcemap, eval mode is Sourcemap?

2. What does it mean in the configuration that contains the cheap keyword only in line?

3. What is the difference between these different configurations?

Answer

Seemingly a lot of configuration items, actually just five keywords eval ,,, source-map cheap module , inline any combination. Each of these five keywords represents a feature that can be combined in any of the four attributes. They represent the following five characteristics respectively (see the characteristic description is a little unclear so, don't worry, look down):

• Eval: Using the Eval package module code

• Source-map: Generating .map files

• Cheap: does not contain column information (more on the interpretation of column information) and does not contain loader Sourcemap

• Module: Sourcemap with loader (e.g. jsx to JS, Babel Sourcemap)

• Inline: will be .map embedded as Datauri and not generate .map files separately (this configuration item is relatively rare)

Understand the above various characteristics, and then to answer the above questions.

What does Eval have to do with Sourcemap, eval mode is Sourcemap?

evalAnd source-map are devtool configuration options in Webpack, the eval pattern is to use eval each module in the Webpack package, and then add the module source at the end of the module //# souceURL , depending on souceURL where the original code was found. A configuration item that contains the Eval keyword does not produce .map a separate file (the eval mode is a bit special, unlike other modes where it relies on sourceurl to locate the original code, while all other options are used .map to locate the file). source-mapA configuration item that contains a keyword produces a .map file that holds the mapping between the original code and the running code, which the browser can use to find the location of the original code. (Note: A inline configuration item containing a keyword also produces a .map file, but the map file is Base64 encoded as Datauri embedding), and a chestnut: eval-source-map is eval source-map the combination of the and, the use of eavl statements including modules, Also produced a .map file. Webpack the .map file as eval the end of the Datauri replacement pattern //# souceURL . According to my own understanding, eval and .map files are different ways of sourcemap implementation, although most of the SOURCEMAP implementation is by generating .map files, but does not mean that only through the .map file implementation. The following is the module code generated after the eval mode:

What does it mean in the configuration that contains the cheap keyword only in line?

The column information here refers to the column information of the code that does not contain the original code. The official documentation for cheap The included explanation is this:

> cheap-source-map - A SourceMap without **column-mappings**. SourceMaps> from loaders are not used.  

This sentence translates to "in the Cheap-source-map mode Sourcemap does not contain column information, also does not contain loaders Sourcemap" Here "column-mappings" is the Code column number meaning, Whether there is any difference between the Sourcemap that contains loaders will be mentioned later. Debug when most people only care about the number of lines of code, very little attention to the number of columns, the column is the line of code from the first character to the position of the location character (including white space characters) contains the cheap keyword's pattern does not contain column information, reflected in the Webpack is: If the keyword is included cheap , The resulting .map file does not contain column information. This means that when you click the location of the code in the browser, the cursor only navigates to the number of rows, not to the specific character position. When you do not include cheap keywords, clicking on the console log will position the character position.

After containing the column information, click on the location of the original code, note the cursor position:

Cursor position with no column information:

This blog: Go to a line numbers at a specific column visually shows the concept of the number of columns. If you go deep into the details in Webpack, you can read this blog: Survivejs:source Maps, which compares the code of the files in all the configuration items in Webpack .map , where the eval-source-map cheap-source-map patterns produced by .map The Intercept and Comparison of fields in the file code mappings :

Devtool: ' Eval-source-map '

"mappings": "AAAAA,QAAQC,GAAR,CAAY,aAAZ",

Devtool: ' Cheap-source-map '

"mappings": "AAAA",

Note: VLQ encoding is used here, (for VLQ encoding can also be found here: front-end Build: Source maps in detail) in VLQ encoding, the comma , represents the character column segmentation, the semicolon ; represents the row division. cheapA configuration item that contains a keyword does not contain column information, and there is no comma. For VLQ coding, this article explains the original Nanyi article. A sourcemap that does not contain loader refers to a sourcemap that does not contain loader, and does not contain it when you use a code compilation tool such as Babel, the original code that you navigate to will be the compiled code location, not the original code.

For example, when I compile JS with Babel, if it contains a sourcemap that does not contain loaders, then the debug will be compiled code, not the original code, (This is in the case where the CHEAP-SOURCE-MAP mode does not contain loaders, the location of debug is the same as the previous comparison):

What is the difference between these different configurations?

Through the above two questions explained, Webpack in the Sourcemap each configuration item similarities and differences should have the certain understanding, at first glance each configuration item is difficult to remember, but actually starts from each key word representative characteristic, can realize their similarities and differences. Their main difference in the Webpack is a manifestation of the performance of the refactoring, generally the eval best performance, the source-map lowest performance, but in my own practice is mostly used is the most complete source-map , the mode for either JS or css,scss can be very good coverage, On the contrary, other modes are incomplete, and refactoring performance seems to be less than perfect in the development environment.
Also need to add is the keyword module , when added keyword module webpack will add loader sourcemap.

The Sourcemap in Webpack