How to debug webpack source code

Time:2021-6-16

Today’s article is mainly about popular science, because although the method is simple, many people have not contacted the development of node, so they have not understood it. There are two main types of node development. One is doingtoolOne is doingservice, which can be debugged. Webpack is a tool class.

One node debugging

Before we talk about how to debug webpack, let’s look at the most basic node to debug JS files. Website of nodedebuggerThe chapter is very clear. I’ll add some operation diagrams.

Usually when we execute a file, it isnode server.js, plus one--inspectperhaps--inspect-brkParameter can start debugging, the difference is--inspect-brkIt will stop at the first line of the code, which I usually use because I test--inspectThe first time the code is executed, the breakpoint does not stay.

Implementation:

node --inspect-brk server.js

You’ll see this output

Debugger listening on ws://127.0.0.1:9229/e27919ae-288d-436c-b06e-c1b9740ef8bd
For help, see: https://nodejs.org/en/docs/inspector

This is to enable the V8 checker, start a WS service, the default port is 9229, and add a dynamically generated UUID. At this time, you need a debugging client that can connect to the service,
Because of the use ofChrome developer tool agreementSo you can debug with chrome developer tools.

Open the developer tools page of chrome. If you see theGreen Icon, click to enter debugging, and port 9229 will be displayed by default.
How to debug webpack source code

If not, enter it in the address bar of chromechrome://inspect/#devices
You can see that as shown in the figure below, there will be a file in remote target where you can start debugging. Clickinspect
How to debug webpack source code

If you areCustom port

node --inspect-brk=5000 server.js

Click on the image aboveDiscover network targetsRight button, add the port you start.
How to debug webpack source code

Debugging of webpack command

If you have mastered the debugging of node, you are only one webpack command away from how to debug the source code of webpackStartup fileWhere is it. Popular science about how to write command line tools node, NPM packagebinField specifies the name of the command and the corresponding startup file to execute, for examplewebpack-cliOfpackage.json

{
  "name": "webpack-cli",
  "bin": {
    "webpack-cli": "./bin/cli.js"
  }
 }

During local installation, the startup file will be soft linked to the projectnode_modules/.binDirectory, the global installation willSoft linkTo the current node environmentbinUnder the directory.

So we went to the projectnode_modules/.binFind it nextwebpackThe first line of the file is like this#!/usr/bin/env nodeintendUse node to execute the fileSo we add the debug parameters at the end of this line--inspect-brkThat’s it. The rest of the steps are the same as the above debugging node.

#!/usr/bin/env node --inspect-brk

Next, let’s call the webpack command, which is the same hereRequires webpack cli
How to debug webpack source code

webpack-cliWhere the webpack method is executed in
How to debug webpack source code

webopackMiddle break point
How to debug webpack source code

In this paper, demo:https://github.com/yylgit/lia…

OK, let’s start your performance, and try to debug where you want to see it.

If you feel rewarding, please pay attention to WeChat official account.Front end good textEvery week, we will share the dry goods knowledge in front-end development.

How to debug webpack source code