webpack打包中path.resolve和__dirname的含义_path.resolve(_dirname)

在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'
  }
};
1
2
3
4
5
6
7
8
9

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

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

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

const path = require('path');
1

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

path.resolve([...paths])
1

…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'
1
2
3
4
5
6
7
8
9

2、__dirname

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

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

3、__filename

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

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

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

示例：

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

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

给定两个模块：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。