likes
comments
collection
share

webpack源码之调试篇

作者站长头像
站长
· 阅读数 14

前言

学习一个工具或者库的源码之前，得对一个库进行大概的认识，比如源码的目录结构，如何调试等。属于前置的准备阶段。

而webpack是我即vue之后，希望通读的一个工具库。其实在团队中，自己需要去完成一些技术指标，而相应的技术储备是必不可少的。而就前端工程化领域而言，webpack是避不开的一条路。

所以在读源码的同时，希望能收获更广阔的技术视野，以及之后用到这个东西的时候，知道其原理。

总体大纲

总历时两个月：每篇文章，将会在最终稿整理完成之后，陆续发送。

本系列基于webpack-4分支，版本4.43.0进行阅读。

  • webpack源码之调试篇（完成时间：2020/05/15）
  • webpock源码之webpack-cli入口分析篇（完成时间：2020/06/13）
  • webpack源码之主流程篇（完成时间：待定）
  • webpack源码之细聊tapable原理【上】（完成时间：2020/06/06）
  • webpack源码之细聊tapable原理【下】（完成时间：待定）

为什么选择webpack4阅读

1、在阅读的过程中，webpack5其实刚出来没多久，对于一些新特性，项目中也会很少用到。我们可以了解完4的东西之后，再去对比了解5的特性。更加有助于我们掌握。

2、对于阅读源码，借鉴资料是必不可少的，网上很多4版本的资料，相对于5来说，如果版本不一致，容易走弯路。

拉取代码

// 拉取webpack仓库
git clone https://github.com/webpack/webpack.git
// 切分支
git checkout webpack-4

如何调试

对于一个庞大的开源工程，逐一看代码是不现实的，我们需要清楚的无非是主流程，以及这个流程完成之后，输出的一些变量值来判断这个流程是干什么的。这种无可避免的需要用到调试工具。

vscode调试

随着vscode逐渐完善debugger模块，目前用vscode来调试node程序已经是一件比较轻松的事。

  • 简单例子的调试

新建一个index.js文件。然后在里面写一些简单的逻辑。

index例子 
const mergeCache = new WeakMap();
const cachedMerge = (first, second) => {
 debugger;
 let innerCache = mergeCache.get(first);
 if (innerCache === undefined) {
  innerCache = new WeakMap();
  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();

在.vscode文件夹中，创建launch.json

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

然后切到调试栏，开启调试

webpack源码之调试篇

调试例图：

webpack源码之调试篇
  • 调试webpack

在package.json中的scripts标签中写入debug指令:

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

例图：

webpack源码之调试篇

修改launch.json文件

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

这里有几个重要的概念：

runtimeExecutable：程序的执行器，默认是node，我们将其改成npm

runtimeArgs：传入执行器的参数。也就是run和debug

port：监听的端口号。因为debug指令中起的端口是5858，所以监听端口5858。

在bin/webpack.js文件中打入debugger断点。

启动调试按钮

进入调试界面：

webpack源码之调试篇

用chrome devtool进行调试

我们也可以用chrome来调试代码。

  • 简单的调试例子

还是延续上面那个index.js例子。

node --inspect index.js

然后打开，chrome://inspect。

点击Open dedicated DevTools for Node

webpack源码之调试篇

调试界面

webpack源码之调试篇
  • 调试webpack

书写debug指令

在package.json中的scripts标签中写入debug指令:

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

例图：

webpack源码之调试篇

–inspect-brk这个参数是会将断点自动断到第一行。之后只需debugger指令调试即可。

总结

关于调试：调试技巧在平常的工作中也是可以用到的，由于前端会偏向于交互的特性，所以console.log这些我会很常用，但是向debug这些，当接触node之后，会发现比console.log实用太多了。所以，这边文章中的调试方式，可适用于大部分场景。

关于webpack：这是第一篇准备篇，希望是好的开始。希望自己能产出高质量的东西。

关于公众号：笔者也要开始维护自己的公众号啦，东西分为原创和转载两部分，因为笔者工作忙的原因，原创尽量保证两个星期一篇，以源码讨论为主。也希望自己能把晦涩难懂的东西，写的浅显易懂。

webpack源码之调试篇