开发自定义Webpack Loader时如何获取原始文件路径？

♫青燕提问于 2026-02-24 20:18:20 阅读 31

前端

我正在写一个自定义的Webpack loader，想在处理文件时拿到这个文件在磁盘上的绝对路径，但不知道怎么取。试过用this.resourcePath，但不确定是不是正确的做法，文档看得有点懵。

比如我的loader是这样写的：

module.exports = function (source) {
  // 想在这里拿到当前处理文件的完整路径
  console.log('file path?', ???);
  return source;
};

有没有人知道具体该用哪个属性？或者有没有官方推荐的方式？

我来解答赞 1 收藏

反馈

2 条解答

❤智营 Lv1

你这问题我太熟了，当年也卡在这儿好一会儿。
在 loader 里确实可以用 this.resourcePath 拿到当前文件的绝对路径，这是官方推荐的方式，没毛病。

不过得注意一点：this.resourcePath 是同步可用的，但有些场景下你可能还想拿到资源的查询参数、loader上下文什么的，建议直接用 this 上的几个常用属性组合着用：

- this.resourcePath：当前文件的绝对路径（含文件名）
- this.resourceQuery：路径后面的查询字符串（比如 ?raw）
- this.context：当前 loader 所在目录的绝对路径（通常是 module 的目录）
- this.loaders：当前匹配到的所有 loader 列表

你这例子直接这么写就行：

module.exports = function (source) {

  const filePath = this.resourcePath;

  console.log('当前处理文件路径:', filePath);

  // 顺带提一嘴，如果你要解析路径或者做文件操作，记得用 Node 的 path 模块

  const path = require('path');

  const fileName = path.basename(filePath);

  console.log('文件名:', fileName);

  return source;

};

补充个坑：如果你用的是 async loader（返回 promise 或用 this.async()），那这些属性依然可用，但得在回调里用 this，别丢了上下文。

要是你发现路径不对，大概率是 loader 的配置顺序或者 include/ exclude 写错了，这种情况我调试过不少次，建议用 console.log(this.loaders) 打出来看一眼 loader 是不是被正确匹配到了。

2026-02-27 08:03

Mr-美菊 Lv1

常见的解决方案就是用 this.resourcePath，这个是对的，Webpack 的 loader 上下文里确实提供了这个属性，它返回的就是当前处理文件的绝对路径。

你写的这个 loader 可以直接改成：

module.exports = function (source) {

  const filePath = this.resourcePath;

  console.log('file path:', filePath);

  return source;

};

补充几个相关的上下文属性，方便你后续扩展用：

this.resourceQuery 是文件的 query 参数，比如 file.js?inline 里的 ?inline
this.loaders 是当前 loader 链中所有 loader 的信息
this.async() 可以返回异步 loader
this.cacheable() 控制是否缓存结果

不过要注意，this.resourcePath 是 Webpack 4 开始推荐的写法，如果你用的是更老版本，可能得用 this.resource，不过现在基本没人用 Webpack 2 了，放心用 resourcePath 就行。

另外别把 resourcePath 和 context 搞混了，context 是 loader 的执行上下文目录，不是文件路径。

有疑问再测一下就行，这玩意儿文档确实写得有点绕。

2026-02-24 20:19