写点什么

webpack 打包过程如何调试?

作者:Jerry Wang
  • 2021 年 12 月 21 日
  • 本文字数:1309 字

    阅读完需:约 4 分钟

webpack打包过程如何调试?

本文适用于已经会使用 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打包过程如何调试?学会如何调试 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 的原创文章,请关注公众号"汪子熙"。

发布于: 1 小时前阅读数: 3
用户头像

Jerry Wang

关注

个人微信公众号:汪子熙 2017.12.03 加入

SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使。

评论

发布
暂无评论
webpack打包过程如何调试?