webpack源码之调试篇

前言

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

而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阅读

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

二、对于阅读源码，借鉴资料是必不可少的，网上不少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

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

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

例图：

修改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断点。

启动调试按钮

进入调试界面：

用chrome devtool进行调试

咱们也能够用chrome来调试代码。

• 简单的调试例子

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

node --inspect index.js
复制代码

而后打开，chrome://inspect。

点击Open dedicated DevTools for Node

调试界面

• 调试webpack

书写debug指令

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

"debug": "node --inspect-brk ./node_modules/webpack/bin/webpack.js --config webpack.pro.js"
复制代码

例图：

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

总结

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

关于webpack：这是第一篇准备篇，但愿是好的开始。但愿本身能产出高质量的东西。

关于公众号：笔者也要开始维护本身的公众号啦，东西分为原创和转载两部分，由于笔者工做忙的缘由，原创尽可能保证两个星期一篇，以源码讨论为主。也但愿本身能把晦涩难懂的东西，写的浅显易懂。