webpack打包中path.resolve和__dirname的含义

最新推荐文章于 2023-05-25 14:28:24 发布

时清云

最新推荐文章于 2023-05-25 14:28:24 发布

阅读量6.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： webpack node 文章标签： path.resolve __dirname __filename

本文链接：https://blog.csdn.net/xiaolinlife/article/details/106533080

node 同时被 2 个专栏收录

16 篇文章

订阅专栏

webpack

13 篇文章

订阅专栏

本文深入解析了Webpack配置中path.resolve和__dirname的使用方法及意义，详细介绍了Node.js核心模块path的功能，包括如何生成绝对路径，以及__dirname和__filename在模块加载过程中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在webpack打包中，我们经常会有这样的配置，

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 对这一行代码有疑问
    filename: 'my-first-webpack.bundle.js'
  }
};

那么我们来看一下path.resolve和__dirname的含义。

1、path是node中的一个核心模块。

官网文档解释如下：
path 模块提供了一些实用工具，用于处理文件和目录的路径。可以使用以下方式访问它：

const path = require('path');

引入之后我们看一下path.resolve()方法

path.resolve([...paths])

…paths 路径或路径片段的序列。
返回: <string>
path.resolve() 方法会将路径或路径片段的序列解析为绝对路径。
给定的路径序列会从右到左进行处理，后面的每个 path 会被追加到前面，直到构造出绝对路径。例如，给定的路径片段序列：/目录1、 /目录2、目录3，调用 path.resolve(’/目录1’, ‘/目录2’, ‘目录3’) 会返回 /目录2/目录3，因为 ‘目录3’ 不是绝对路径，但 ‘/目录2’ + ‘/’ + ‘目录3’ 是。

如果在处理完所有给定的 path 片段之后还未生成绝对路径，则会使用当前工作目录。

生成的路径会被规范化，并且尾部的斜杠会被删除（除非路径被解析为根目录）。

零长度的 path 片段会被忽略。

如果没有传入 path 片段，则 path.resolve() 会返回当前工作目录的绝对路径。

path.resolve('/目录1/目录2', './目录3');
// 返回: '/目录1/目录2/目录3'

path.resolve('/目录1/目录2', '/目录3/目录4/');
// 返回: '/目录3/目录4'

path.resolve('目录1', '目录2/目录3/', '../目录4/文件.gif');
// 如果当前工作目录是 /目录A/目录B，
// 则返回 '/目录A/目录B/目录1/目录2/目录4/文件.gif'

2、__dirname

– directory（目录）name === 目录名
当前模块的目录名。相当于 __filename 的 path.dirname()。
示例，从 /Users/mjr 运行 node example.js：

console.log(__dirname);
// 打印: /Users/mjr
console.log(path.dirname(__filename));
// 打印: /Users/mjr

3、__filename

– file（文件）name === 文件名
当前模块的文件名。这是当前的模块文件的绝对路径（符号链接会被解析）。

对于主程序，这不一定与命令行中使用的文件名相同。

有关当前模块的目录名，参见 __dirname。

示例：

从 /Users/mjr 运行 node example.js：

console.log(__filename);
// 打印: /Users/mjr/example.js
console.log(__dirname);
// 打印: /Users/mjr

给定两个模块：a 和 b，其中 b 是 a 的依赖文件，且目录结构如下：

/Users/mjr/app/a.js
/Users/mjr/app/node_modules/b/b.js
b.js 中的 __filename 的引用会返回 /Users/mjr/app/node_modules/b/b.js，而 a.js 中的 __filename 的引用会返回 /Users/mjr/app/a.js。