Webpack - Learn about configuring source-map

If source-map is enabled, the build speed will be slow.

So take a look at what source-map is.

Source map, the name of which has basically explained its specific principle — in some way, the compressed and compiled online files are mapped to the source file.
Source mapping: A separate Sourcemap file is generated, and errors are identified by the column and row that are currently reporting an error.

Code compression (compress/uglify etc.)
Multi-file merging (to reduce HTTP requests)
Language preprocessing, compilation, etc. (COMPILE es6, JSX to ES5, compile TypeScript to JavaScript, etc.)

When there is an error in the file and the mode used is Production, the packaged file is in a compressed form, so it is difficult to locate the error. Source-map is a mapping file. If you click on it, the error is the source code, not the compressed format, which is convenient for debugging.

There are four main forms that need to be added to the configuration file webpack.config.js:

Add mapping files to help us debug the source code
```
 devtool:'source-map'
Copy the code
```
No separate files are generated, but rows and columns can be displayed
```
 devtool: 'eval-source-map'
Copy the code
```
No columns are generated, but it is a separate mapping file that can be retained for debugging
```
Devtool: 'cheap-module-source-map' // not much useCopy the code
```
Instead of generating a file, it is integrated into a packaged file and produces no columns
```
 devtool:'cheap-module-eval-source-map'
 
Copy the code
```
Cancel the mapping
```
 devtool:false
Copy the code
```

React-scripts wepack.config.js source map configuration:

A new mapping file will be added under the packaged directory build:

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.