为什么 webpack 配置必须使用 path.resolve & path.join

Question

在webpack配置中很常见，当我们需要设置路径时，经常使用path.resolve或path.join，我只是想弄清楚为什么我们必须使用它们而不是纯字符串路径，例如'../dist'

我部分理解可能出于某种目的，它们用于返回绝对路径，但我认为纯字符串路径也可以正常工作。

例如

output: {
filename: '[name].js',
path: path.resolve(__dirname, '../dist'),
chunkFilename: 'js/[name].[chunkhash].js'
}

Answer 1

这与 webpack 无关，仅与 Node.js 处理路径的方式有关。路径不是相对于文件路径解析的，而是默认相对于工作目录的。假设我们有以下目录结构：

project
 ├── a
 |   └── 1.js
 └── b
     └── 2.txt

1.js 包含以下内容：

const filePath = '../b/2.txt';
const content = require('fs').readFileSync(filePath);
console.log(content.toString());

那么，如果我们运行

cd a
node 1.js

一切正常。

但如果我们改为从顶级目录执行，则如下：

node a/1.js

我们得到一个错误：

Error: ENOENT: no such file or directory, open 'C:\Users\baryl\Desktop\b\2.txt'

因为现在解析路径是相对于project 而不是project/a。 path.resolve 解决了这个问题。

const path = require('path');
const filePath = path.resolve(__dirname, '../b/2.txt');
const content = require('fs').readFileSync(filePath);
console.log(content.toString());

现在我们可以安全地从项目目录执行node a/1.js，它会按预期工作。