一个webpack的配置错误引发的思考,让我的调错能力提升了一个台阶

这个问题已经是去年 3 三月份遇到的了,因为解决了,所以也就没有怎么理会这个问题了,那么今天我们就对这个问题来进行一下复盘。

项目背景

我开发了一个脚手架,其中有一个包是使用 webpack 配置的 npm 包,在我们项目中安装这个依赖包,并在终端使用特定命令则可以启动该 webpack 配置:

当我们安装相关依赖的时候,并执行 start 这个命令,我们的项目就可以打开了。

现在的问题就是,当我们在配置中,对 loader 的配置直接使用 loader 名称字符串(如 "postcss-loader"),Webpack 会在启动构建的项目的 node_modules 目录中寻找这个 loader。但是,由于实际的 loader 位于你的 npm 包内,而非项目本身的 node_modules 目录,Webpack 就无法找到这个 loader,从而报出"模块找不到"的错误。

首先,我们先忽略上面的 require.resolve,这个是没有问题的,就是用这个来解决的,那么接下来我们就来复盘一下我是怎么解决了这个问题的。

问题思考

因为这是 webpack 相关的配置,首先我去查找到了相关的官方文档:

我看到了这些配置好像和我的并没有什么特别的点,然后我的目光来到了该文档页面的最底部:

既然模块是从 node_modules 中查找,我翻遍了第一层目录,好像并没有 postcss-loader 找到这个模块,毛都没有。

那么我的问题就来了,我在另外一个普通的项目中,在项目中直接配置了 webpack 的相关配置,并启动项目:

你会发现项目是能启动成功的,那么我们再看看 node_modules 目录下的文件:

找到了,这也验证了官方文档中说到的那样,正是通过 node_modules 中查找到的。

那大概问题就找到了,在我的脚手架中的 Webpack 配置里,由于 postcss-loader 是作为依赖包的一个依赖安装的,所以在运行时,Webpack 在尝试解析这个 loader 时未能在项目的直接依赖中找到它,导致了路径查找失败。这表明,问题发生在运行时对模块路径的解析上,即 Webpack 未能定位到 postcss-loader 的实际路径。

解决问题的过程

首先我是查阅了 webpack 的官方文档的,上面已经提到了。

然后我又带着这个问题去查看 Stackoverflow,依然没有找到(我感觉我太菜了),因为国内的社区上并没有写这种项目的相关教程,况且也没有多少人写这种项目,所以我无聊怎么问这个问题我都问不出来。在问问题的过程中,我又去看了一下 webpack 相关的 issue,还是没有发现怎么解决的。

这个问题困扰了我很久还是没有解决,突然我想到 create-react-app 就是我要的,于是我便翻开了它的源码,发现它就是用 require.resolve 来解决这个问题的。

经过这次的思考,我开始学会了查阅官方文档,相关依赖包的 issue,stackoverflow,还有源码来解决问题。

require.resolve 来解决这个问题

require.resolve 是 Node.js 中的一个函数,用于解析某个模块的路径。当你使用 require 函数来导入模块时,Node.js 会根据一定的规则去查找和定位这个模块。require.resolve 函数则可以用来找出 require 函数将会加载的确切文件路径,但它并不会实际加载这个模块。

简单来说,如果你想知道使用 require 加载一个模块时,Node.js 会从哪个文件路径加载,而又不想实际加载这个模块,那么 require.resolve 就非常有用。

通过下面这样的代码,我们就能具体查阅到 postcss-loader 模块的具体入口位置:

js 复制代码
const modulePath = require.resolve("postcss-loader");
console.log(modulePath);

这段代码会打印出 postcss-loader 模块的完整路径。如果 postcss-loader 无法被解析,require.resolve 会抛出一个错误。

这样,我们就在配置时查找到了该 loader 的具体位置,它会基于 npm 包的位置(而非项目的位置)解析模块的路径,确保无论 npm 包被安装在何处,Webpack 都能正确地找到并加载这些 loader。

总结

一个小小的 webpack 配置,那时候真的是花了我一天时间才解决到的,那时候还不知道为什么能够这样解决的。

于是便有了今天的分享,希望这个查找问题的过程能对你有帮助,如果你有比较好的解决问题过程,也可以分享出来。

最后分享两个我的两个开源项目,它们分别是:

这两个项目都会一直维护的,如果你也喜欢,欢迎 star 🥰🥰🥰

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试