Source Map is a browser translation technique for confusing compressed code and Source code for developers to debug. The browser does not load the Source Map file by default, only when the browser pops up the debug console. Therefore, a separate. Map file should be used to store Source map online to ensure page performance. (Detailed configuration methods will be described later).

The Source Map for Webpack can be configured with the configuration item devTools. Special cases can also be handled via the SourceMapDevToolPlugin that comes with WebPack.

Sourcemap configuration item

  1. Eval: Generated code Each module is executed by eval, and @sourceURL exists.

  2. Cheap-eval-source-map: Includes a base64-encoded code as the DataUrl, based on Eval.

  3. Cheap-module-eval-source-map: includes the source map generated by the loader than cheap-eval-source-map.

  4. Eval-source-map: the original code does the same thing, but with the highest quality and lowest performance.

  5. Cheap -source-map: Generates a Soure map file with no column numbers.

  6. Cheap -module-source-map: Generates a source map containing the loader.

  7. Source-map: The highest quality and most complete source map, but also the slowest to generate.

It looks like there are many choices, but in fact it is a combination of items.

Eval: Generate code. Each module is executed by EVAL

Cheap: The generated Source Map contains no column information and no Source Map information for the Loader.

Module: The generated Source Map contains loader information.

Source-map: Generates the most complete and highest quality source map and generates a. Map file.

Inline: inserts the.map file last night DataUrl, does not generate a separate. Map file (configuration is rare)

practice

Eval: If the Webpack devTool is configured as eval, each module is wrapped in the eval function.

Source-map: When the configuration item eval is replaced with source-map, eval in the corresponding position disappears. The eval part is now an anonymous function.

A reference to the.map file is also added at the end of the file (the location on the line should be a full address). Go to the build directory and observe that the corresponding.map file has been generated.

Eval-source-map: Eval is then used in conjunction with source-map, with more sourcemappingurls than the eval mode. The content of sourceMappingURL is the content of the generated Source Map encoded in Base64.

Cheap-eval-source-map: Next, look at the result of adding the cheap pattern in the browser

Source:

<template> <div class="page"> </div> </template> <script> console.log(123123); Export default {components: {// TypeTableColumn,}, name: "component-test", data() {return {text: "test 1",}; // TypeTableColumn,}, name: "component-test", data() {return {text:" test 1",}; }, created() { }, methods: { async counter() { }, }, }; </script>Copy the code

Do not add cheap: the browser is shown in the figure below

Add cheap: browser display for

It was found that the template tag of vue was missing after cheap was added. This is because Cheap removes the Source Map information generated by the Loader without generating the column information. So the contents of the template tag are lost. Through the browser console using the shortcut key Command + O input column information location, because of the lack of column information, is unable to jump to the specified location, jump demonstration. It is possible to jump if you enter only line information.

Since column information is not particularly important, the module mode is required to generate Source Map information including the Source Map generated by loader.

cheap-module-eval-source-map:

Add the Module and you can see the completed source code.

Some experience

Offline development environments need to be able to see the corresponding information and are not very concerned with page performance information, so it is better to use cheap-module-eval-source-map offline.

In online environments eval is not efficient because it is focused on page performance, so it is better to remove eval and use **cheap-module-source-map instead. ** While online source-map may be stored on static resource cloud, public path information needs to be configured. So WebPack tends to use the SourceMapDevToolPlugin plugin online for more elaborate source-Map configuration.

Data jump