SourceMap configuration
What is SourceMap?
In webpack.config.js, in developer mode mode: "development", the default SourceMap has been configured, so let's close SourceMap
mode: "development",
devtool: 'none',
Rerun the pack on it, find run successfully, then SourceMap in the end is what is it?
If you deliberately defined syntax error, for example consele.log('hello word!'), there is no problem packing, the page will run error
to see what went wrong, click on the right you will be prompted to look at the code where the error
but this is out of our package main.js under dist file code but we hope that when code is wrong, do not tell us is packaged file in the end is what line of code, we want to know the source code in the code in which sentence is wrong. How to do it, we can do such a thing by SourceMap.
SourceMap is a mapping relationship, she knew the original code package out of the js file corresponding mapping relationship through this we can know which line of code is wrong
How to use this map to do with it
only needs to be configured in webpack.config.js of devtool as a source-map can be a
packaged running, click on the error
can be seen index.js file the error.
This is the file after SourceMap sense, we see an error, the error is to see the original code, rather than the packaged error
official website to learn: DOCUMENTATION-> CONFIGURATION-> Devtool
can see devtool configuration options are many.
When choosing source-map when, build and rebuild all the speed -, - indicates that relatively slow, meaning that the configuration of the devtool is source-map when actually slow down the process of packing, packing because the process requires the construction of such a mapping relationship, and, when the source-map devtool set when there is a file in the package directory main.js.map dist under which the file is a respective mapping relationship
devtool: inline-source-mapIs what effect, packing operation, as is the prompt browser to view the source code of the error, and source-map looks nothing different, but inline is how it happened
in the packed files dist, no main.js.map this document, the reason is when using inline-source-map. this map file is written directly by dataURL way main.js in
when using inline-source-map when, map.js file will become a base64 string is put main.js to bottom, this is the role of inline-source-map the 
devtool: cheap-inline-source-maprole of packaging operation, as is the prompt browser to view the source code of the error, and source-map looks nothing different, look at the packaging files generated, did not main.js.map, that cheap What does it mean
when a great amount of time our code, if the code in addition to error, and has not added devtool cheap, then the source-map will tell you that your code is the first few characters of which line is a problem, it will specifically where a line which column to tell you some specific questions arising. But such a mapping performance consuming, error codes can just inform what line, the first concrete columns without telling us, if added cheap, meaning that tell what line you can just tell me. cheap packaged performance will be improved. While adding a cheap, then the source-map only for the business code, for example, service code is index.js file, source-map that will go to map this file, a relationship between the package and it generated main.js, not to manage third-party modules will be introduced, for example, how some of the problems inside the loader maps. If you want cheap not only the code tube business, want some of sourcemap tube loader, then, or third-party modules inside the code error, you can add a Module devtool: cheap-module-inline-source-mapModule mean not only the code tube business, also control other loader, first tripartite module inside some errors.
devtool: 'eval'Packaging run the fastest, packing operation, as is the prompt browser to view the source code of the error, look at the packaging files generated, nor main.js.map, under the main.js file does not base64 strings, that eval is what this means
in main.js, the execution will be in the form of eval, and will be back with a sourceURL directly to the current file in error, and the other with a source-map pack quite the same way, it is through the eval this form to generate corresponding relationship between the source-map, eval is the fastest execution efficiency, good performance of packaging way, but for more complex code, if eval may prompt errors in a not comprehensive
best practices:
If it is development environment, it is recommended to use cheap-module-eval-source-map(an error full, packing speed is faster)
if it is online environment: It is recommended to use cheap-module-source-map(no need to have a mapping, mapping insisted if this feature)
SourceMap Summary: The
role of packaging generated code is wrong, be able to do a mapping package code and the original code, the original code can be found directly wrong.
devtool configuration options are many:
Source-map: generates a map file
inline: map file will become a string of base64 main.js on the
cheap: prompt where only one line, just business code
module: In addition to the business code, error module code will prompt
eval: can help by eval way we code package, or with the source-map the code package, the corresponding service code, and source-map to eval way to execute together, so It will increase packaging speed.
