As the title suggests, sometimes when you look at the configuration of someone’s webpack.config.js file, you’ll see that they’ve added this line:

devtool: 'source-map'
Copy the code

Literally, Devtool seems to be about development, source-map seems to be about source code or maps, and rather than trying to guess what it really means, let’s use examples to get a feel for what it really means.

This section is just one of the introductory tutorials. We won’t go too far to understand what source-map means because it’s too complicated.

Let’s begin to feel the magic of Source-Map.

1. Don’t use it yetsource-mapIn the case

Let’s start by writing random bad code in JS, which means you can write random methods that don’t exist.

Like this:

src/app.js

import css from './app.scss'; .// This SSS method does not exist
sss

import $ from 'jquery';
import './jquery.changeStyle'; .Copy the code

Writing wrong code is normal, the key is to know how to debug, is to find out what is wrong, it is good to change it.

Let’s find out what went wrong.

Open the developer tools in your browser as follows:

Then open the link in the image above and:

This is confusing, because simply locating the compiled app.bundle.js file is useless, because you still can’t find the source file, so you can’t fix the wrong code.

2. Devtool: ‘source-map’

So what to do? Very simple.

Add devtool: ‘source-map’ to the webpack.config.js file as follows:

module.exports = {
  entry: {... },devtool: 'source-map'
}
Copy the code

So let’s try debugging again.

Take a look at the picture below:

We have solved the problem so that we can look at where the error was reported and find the source file that reported the error.

So we were dealing with javascript files, what about CSS files?

Let’s see.

3. Process the CSS file

First, let’s write some bad CSS code.

src/app.scss

body { background: pink; P {/* XXXX is written incorrectly on purpose. */ color: xxxx; }}Copy the code

My HTML page has p tag, we use the developer tool to locate the style of p tag, as shown in the picture below:

As you can see from the figure, we cannot debug the CSS code, i.e. use itdevtool: 'source-map'It is no use.

So what to do?

Previously we used the following loaders to handle CSS. (If you don’t understand, check out the previous section.)

var cssDev = ['style-loader'.'css-loader'.'sass-loader'];
Copy the code

All of these loaders happen to have an option called sourceMap. (You can check their official websites for this information.)

Let’s just set it to true.

Let’s change the above code to the following:

var cssDev = ['style-loader'.'css-loader? sourceMap'.'sass-loader? sourceMap'];
Copy the code

Let’s try it out again.

Then, when we click in, we get something like this.

That way, we can easily debug javascript and CSS code.

For more information about Devtool, see the official documentation devtool

Here are some reference links:

  • Some explanation of the webpack Sourcemap option’s various modes
  • What are the 7 SourceMap modes in devtool?

So much for now.