本文适用于已经会使用webpack的前端开发人员，但是想进一步了解webpack细节和进阶。

首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤，在本地搭建一个webpack的hello world项目。

搭好之后的项目结构如下图：

打开index.html能看到Hello World字符串。

下面介绍如何调试webpack本身的打包过程。

假设我们的需求是想调试项目文件夹下的webpack配置文件：webpack.config.js

那么我们在里面设置一个断点：

1. 在当前webpack项目工程文件夹下面，执行命令行：

node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress

其中参数--inspect-brk就是以调试模式启动node：

会观察到输出：

Debugger listening on ws://127.0.0.1:9229/19421955-0f12-44c7-95da-fa5dd8384e04

For help see https://nodejs.org/en/docs/inspector

2. 打开Chrome浏览器，地址栏里输入chrome://inspect/#devices：

在弹出窗口点击超链接"Open Dedicated DevTools for Node.

此时在第一步的命令行窗口里，出现一行新的提示信息：debugger attached。

Chrome窗口弹出来了，断点停留在webpack.js第一行处。这个webpack.js就是我们之前命令行里指定的参数：node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress

然后点一下Chrome调试器里的“继续执行”，断点就提留在我们设置在webpack.config.js里的debugger断点了。

在webpack和nodejs里，我们经常使用require函数加载原生模块或者开发人员自定义的模块。

原生模块的加载，比如：

const path = require("path");

这个语句是webpack和nodejs应用里经常使用到的。今天就来谈谈它的实现原理。

还是通过单步调试的方式来学习。

大家首先得通过我前一篇文章学会如何调试webpack打包过程。

require函数的实现位于file:///internal/module.js

注意看第10行和第13行的requireDepth 加减一。因为一个module通过require被加载时，可能会递归地加载另外的依赖module，所以需要这个requireDepth字段来记录加载module的深度。

这个module.js的实际地址位于当前项目文件夹下的node_modules文件夹下面：

第11行的mod变量代表什么？

从调试器看出，就是当前命令行node启动的webpack.js:

mod.require(path)会将执行投递到Module._load函数：

首先会去Module._cache里检查path模块是否已经加载了。在我这个例子里，path是第一次加载，所以Module._cache是空的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n9RJY5r2-1640051779754)(http://upload-images.jianshu.io/upload_images/2085791-3569e95bd7e95665?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

那么进入NativeModule.require(filename):

nativeModule，即原生模块，里面也有cache缓存机制。

因为path模块显然是原生模块，而非开发人员自己定义的模块，因此NativeModule.getCached返回了已经被预加载的path模块.

cached.exports里包含了一系列函数，这些函数就是我们nodejs应用里经常使用的工具函数，比如join, parse, resolve等等。

这就是nodejs和webpack里原生模块的加载原理。希望对前端开发人员有所帮助。

要获取更多Jerry的原创文章，请关注公众号"汪子熙"。