实习打怪之路：webpack中path.join()和path.resolve()的理解与__dirname和__filename的含义

目录

对于__dirname和__filename的解释

在使用path.resolve()时

path.join（[...path]）是使用分隔符将所有的字段连接起来，然后对路径规范化

path.resolve（[...path]）是将一系列路径或路径段解析为绝对路径

---

对于__dirname和__filename的解释

__dirname,是一个成员，用来动态获取当前文件模块所属的绝对路径

__filename，可以动态获取当前文件夹的绝对路径（包含文件名）

 

 

在使用path.resolve()时

相当于是在当前文件夹下拼接了一个文件路径

  所以说path:path.resolve(__dirname,"dist")就是在打包之后的文件夹上拼接了一个文件夹，在打包时，直接生成。

在使用webpack的时候，在webpack.config.js这个文件中有些人使用path.join(__dirname, 'src/index.js') 又有些人使用path.resolve(__dirname, 'src/index.js')

但是结果是一样的，不禁感到十分迷茫，于是查看文档理解这两个API

path.join（[...path]）是使用分隔符将所有的字段连接起来，然后对路径规范化

常规操作

path.join('a','b','c','d/e');
// Returns: 'a/b/c/d/e'

零长度的字符串会被忽略

path.join('a','b','','d/e');
// Returns: 'a/b/d/e'

'.' 表示当前目录，'..'表示上一级目录

可能不太好理解，看一下代码段

path.join('a','b','.','d/e');
// Returns: 'a/b/d/e'
 
path.join('a','b','..','d/e');
// Returns: 'a/d/e'

我的理解就是 目录是a/b/d/e

第一个 a/b 下一个拼 '.' 层级不会变化 接着拼 d/e 最后结果就是 a/b/d/e

第二个 a/b 下一个拼 '..' 找上一级 变成 a/ 接着拼 d/e 最后结果就是 a/d/e

path.resolve（[...path]）是将一系列路径或路径段解析为绝对路径

重点是给定的路径顺序是从右到左处理的，知道构建出绝对路径为止

常规操作

path.resolve('a','b','d/e');
// Returns: '/a/b/d/e'
// 是一个绝对路径

从右到左遇到绝对路径为止

path.resolve('a','b','/d/e');
// Returns: '/d/e'
// /d/e 就是一个绝对路径，所以结果为/d/e

零长度的字符串会被忽略

path.resolve('a','b','','d/e');
// Returns: '/a/b/d/e'

看到这里就可以知道

path.join(__dirname, 'src/index.js') // return D:\test\src\index.js 
path.resolve(__dirname, 'src/index.js') // return D:\test\src\index.js 
//结果是相同的

但是如果resolve后面拼接的是一个绝对地址，就达不到想要的效果

path.join(__dirname, '/src/index.js') // return D:\test\src\index.js 
path.resolve(__dirname, '/src/index.js') // return \src\index.js 
//结果肯定就炸裂了

所以如果是我，我应该会用path.join() 哈哈，也许能减少点失误