[Go] webpack devtool and source maps

Source Maps

Webpack package generated. map suffix file, making our development debugging more convenient, it can help us to link to the breakpoint corresponding to the source code location for debugging ( //# souceURL ), and Devtool is used to specify the Source-maps configuration method. The following is an explanation of the official documentation:

Source Maps development tool (Devtool)

This option controls whether the build is generated and how the Source Map is generated. The following are the configuration options for the official documentation:

Devtool configuration options
Some of these values apply to the development environment ( in the form of the construction of various ways, you can see the eval way can greatly improve the continuous construction efficiency, which often need to change the edge of the students are very important), some are suitable for production environments. For development environments, it is often desirable to have a faster source map that needs to be added to the bundle to increase the volume, but for a production environment it is desirable to have a more precise source map that needs to be detached from the bundle and exist independently.

• for development environments

eval Each module is performed using Eval () and has//@ sourceURL. This option is built fairly quickly. The main drawback is that the number of rows is not displayed correctly because it maps to the converted code instead of to the original code.
Inline-source-map -Sourcemap is converted to Dataurl and added to the bundle.
eval-source-map -Each module is executed using eval (), and Sourcemap is converted to Dataurl after it is added to eval (). Initializing the Sourcemap is slow, but it provides rapid speed when rebuilding and generates actual files. The number of rows can be mapped correctly because they are mapped to the original code.
Cheap-module-eval-source-map -just like Eval-source-map, each module is executed using eval (), and Sourcemap is converted to Dataurl after it is added to eval (). "Low overhead" is because it does not generate a column map, only the number of rows mapped.

• For production environments

Source-map -generates a complete sourcemap with output as a standalone file. The development tool knows where to find the sourcemap because of the reference annotations added to the bundle.
Hidden-source-map -Same as Source-map, but no reference comment is added to the bundle. If you only want to sourcemap the error stack trace information in the mapping error report, but you do not want to expose Sourcemap to the browser development tool.
Cheap-source-map -sourcemap with no column mappings (COLUMN-MAP), ignoring the loaded source map.
Cheap-module-source-map -sourcemap with no column mappings (COLUMN-MAP), simplifies the loaded source map to a separate map per line.
Nosources-source-map -Create a sourcemap with no sourcescontent. It can be used to map the stack traces on the client (translator Note: Referring to the browser) without exposing all the source code.

Example

For example, in my Vue project, when packaging the build.js of a production environment, the Devtool used is source-map that the package information is as follows:

Run the Webpack command in a production environment
The list of dist to be packaged is as follows (contains build.js.map files):

The dist directory generated after packaging

The most primitive implementation of the Source-map, packaging code at the same time to generate a Sourcemap file, and at the end of the packaging file added //# souceURL , the note will tell the JS engine original file location

The generated build.js

Recommended Way

Development Environment Recommendation:
cheap-module-eval-source-map
Production Environment Recommendation:
cheap-module-source-map
However, the construction of VUE-CLI scaffolding, the development environment is used eval-source-map , the production environment is used source-map . In any case, it all feels the same. However, directly put Sourcemap into the packaged file, it will significantly increase the size of the file, not conducive to the fast loading of static files, while the. map file will only be downloaded when F12 is turned on when the. Map is opened (Sourcemap primarily serves debugging), so It is recommended to use the form of an outreach. Map .

Reference links

http://cheng.logdown.com/posts/2016/03/25/679045

Zhangivon
Links: https://www.jianshu.com/p/ad96e712564c
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

[Go] webpack devtool and source maps