Webpack from A to Asia: Webpack source map

Tram Ho

Webpack from A to Asia with kentrung

When webpack encapsulates your source code, tracking errors or warnings can become difficult. For example, if you have three src/a.js src/b.js and src/c.js source files merged into one bundle.js file and one of the source files has errors, the error message will point to the bundle. js. This is not always helpful because you may want to know exactly where the error is coming from, how many lines it is, what file is corrupted. To make life easier, webpack provides some options to help us find errors easily. They are inline source map or mode development

1. Prepare the file

Code for the original webpack.config.js file:

Source file src/index.js I deliberately code errors like this:

Easy, we see that the variable kentrung has never been declared, so it will report an error. Just ignore it and run webpack.

After the webpack build is complete open the dist/index.html file and see the log. The error result is as follows:

It says this type of error, it is very difficult for you to know which error the file is actually, which line is always. To make it easy to fix errors, webpack provides inline source map or development mode option .

2. Inline source map mode

Source map is a way to set up source maps, mapping your compiled code back to the original source code. If an error originates in the src/index.js , the source map will tell you the exact location of the error. Add this option to webpack.config.js

When adding this option, we easily know where the error is so that the error * (I mean fix the error ^^)

3. Development mode

Best when we are in the process of writing code should choose mode: development mode for easy debugging, error tracking easily. Add this option to webpack.config.js

When we add this option, we have the same result as using inline source map

Also when we add this option, the cmd screen also loses the warning of the webpack that keeps reminding me all day


This article is over, hope with this article you have added a lot of useful knowledge. See you in the next article!

Share the news now

Source : Viblo