After we pack the file with Webpack, we will generate a compiled and compressed JS file. If there is a problem, this code is very difficult to troubleshoot, unable to locate the source. This is where the source map is needed.

1.source map

Simply put, a Source Map is an information file that stores location information. That is, every position in the transformed code corresponds to the position before the transformation. With this, when something goes wrong, the debugger will display the original code instead of the converted code. This undoubtedly brings great convenience to developers. — JavaScript Source Map details

Detailed explanation of JavaScript Source Map — Ruan Yifeng

2.source mapThe format of the

There are many source map formats available in Webpack. The official address

3.source mapThe keyword

  • evalUse:evalPackage module code
  • source mapProduced:.mapfile
  • cheap: Does not contain column information
  • inlineWill:.mapAs aDataURIEmbedded, not generated separately.mapfile
  • module: containsloaderthesourcemap

4.source mapThe use of

Generally speaking, we use it in the development environment, and the online environment is turned off.

Let’s run through some examples of common formats.

Simply initialize a project

. ├ ─ ─ dist ├ ─ ─ package - lock. Json ├ ─ ─ package. The json ├ ─ ─ the SRC │ ├ ─ ─ index. The js │ └ ─ ─ style.css. CSS └ ─ ─ webpack. Config. JsCopy the code

4.1 eval

devtool: 'eval'
Copy the code

Then NPM runs build

You can find a line of code at the bottom of the package file, the end of which tells you where the source code is

4.2 source-map

Webpack.config.js Let’s set it up:

devtool: 'source-map'
Copy the code

After build, we find that there are two build files

The last line of bundle.js tells you which corresponding.map file you need to find

4.3 inline-source-map

Webpack.config.js Let’s set it up:

devtool: 'inline-source-map'
Copy the code

After build, we found only one file. This is because inline does not generate a separate.map file, but inserts the.map file as a dataURL into the page.

In a real development environment, using source-map or inline-source-map mode debugger, you can see the source code directly, which is very convenient.

Link to the article

Webpack learning path (6) the hash/chunkHash/contentHash

Webpack Learning path (5) Loader introduction and common loader introduction

Webpack-hot-middleware enables hot updates

Webpack-dev – Middleware

Webpack-dev-server implements hot update

Webpack learning path (1) basic configuration

I am moving forward.