preface

Before learning the source code of a tool or library, you should have a general understanding of a library, such as the directory structure of the source code, how to debug, etc. It is the stage of preparation.

Webpack is a library of tools that I want to read through after VUE. In fact, in the team, I need to complete some technical indicators, and the corresponding technical reserve is essential. As far as front-end engineering is concerned, Webpack is an unavoidable path.

So while reading the source code, I hope to gain a broader technical perspective, and then when I use this thing, I know its principle.

The overall outline

The total duration is two months: each article will be sent after the final draft is finished.

This series is based on the WebPack-4 branch, version 4.43.0.

  • Debug webPack source code (completed time: 2020/05/15)
  • Webpack – CLI entry analysis of webPOck source code
  • Main Flow of WebPack source code (Completion time: to be determined)
  • Tapable principle [1] (Completed time: 2020/06/06)
  • Tapable principle [2] (Completion time: TBD)

Why webpack4

1. In the process of reading, Webpack5 actually just came out for a short time, for some new features, the project will rarely use. We can compare and understand the properties of 5 after we know the things about 4. It’s more helpful for us to grasp.

2, for reading the source code, reference information is essential, a lot of 4 versions of the information online, relative to 5, if the version is not consistent, easy to detour.

Pull the code

/ / pull webpack warehouse git clone https://github.com/webpack/webpack.git/cut/branch git checkout webpack - 4Copy the code

How to debug

For a large open source project, it is not practical to look at the code one by one. All we need to know is the main process and some variable values output after the process is completed to determine what the process is doing. This inevitably requires debugging tools.

Vscode debugging

As vscode improves the debugger module, it is now a breeze to debug node programs using vscode.

  • Simple example debugging

Create a new index.js file. Then write some simple logic inside.

The index case 
const mergeCache = new WeakMap(a);const cachedMerge = (first, second) = > {
 debugger;
 let innerCache = mergeCache.get(first);
 if (innerCache === undefined) {
 innerCache = new WeakMap(a); mergeCache.set(first, innerCache);  }  const prevMerge = innerCache.get(second);  if(prevMerge ! = =undefined) return prevMerge;  const newMerge = Object.assign({}, first, second);  innerCache.set(second, newMerge);  return newMerge; }; cachedMerge(); Copy the code

In the.vscode folder, create launch.json

{
    "version": "0.2.0".    "configurations": [
        {
            "type": "node". "request": "launch". "name": "Launch Program". "skipFiles": [  "<node_internals>/**" ]. "program": "${workspaceFolder}/index.js"  }  ] } Copy the code

Then go to the debug bar and start debugging


Debugging example diagram:


  • Debugging webpack

Place the debug directive in the scripts TAB of package.json:

"debug": "node --inspect=5858 ./node_modules/webpack/bin/webpack.js --config webpack.pro.js"
Copy the code

Case diagram:


Modify the launch.json file

{
  "version": "0.2.0".  "configurations": [
    {
      "type": "node". "request": "launch". "name": "debug". "runtimeExecutable": "npm". "runtimeArgs": ["run"."debug"]. "port": 5858  }  ] } Copy the code

Here are a few important concepts:

RuntimeExecutable: the executable of the program, node by default, which we will change to NPM

RuntimeArgs: Arguments passed to the actuator. Run and debug

Port: indicates the listening port number. Listen on port 5858 because the starting port in the debug directive is 5858.

Hit the debugger breakpoint in the bin/webpack.js file.

Launch debug button

Enter the debugging interface:


Use Chrome DevTool for debugging

We can also use Chrome to debug code.

  • Simple debugging examples

Let’s continue with the index.js example above.

node --inspect index.js
Copy the code

Then open, Chrome ://inspect.

Click Open Dedicated DevTools for Node


Debug interface


  • Debugging webpack

Writing debug commands

Place the debug directive in the scripts TAB of package.json:

"debug": "node --inspect-brk ./node_modules/webpack/bin/webpack.js --config webpack.pro.js"
Copy the code

Case diagram:


– inspect-brk automatically breaks the breakpoint to the first line. Then you just need the debugger command to debug.

conclusion

About debugging: Debugging techniques can be used in everyday work as well. Since the front end tends to be more interactive, CONSOLe. log is something I use a lot, but debugging is a lot more useful than console.log when I touch Node. Therefore, the debugging method in this article can be applied to most scenarios.

About Webpack: This is the first prep and hopefully a good start. I want to produce high quality stuff.

About the public number: the author also want to start to maintain their own public number, things are divided into original and reprint two parts, because the author is busy, original as far as possible to ensure that two weeks, to source discussion. Also hope oneself can be difficult to understand the thing, write easy to understand.