为什么在 webpack 配置中使用 __dirname 和 path.resolve？答案

【问题标题】：Why use __dirname along with path.resolve in webpack config?为什么在 webpack 配置中使用 __dirname 和 path.resolve？
【发布时间】：2021-11-17 04:37:56
【问题描述】：

我正在阅读这个 webpack 教程：https://youtu.be/TOb1c39m64A

在 1:30:00 左右，他在path.resolve 中讨论了__dirname 的使用，但我不太明白使用和不使用它有什么区别。

他们两个 (path.resolve & __dirname) 不是同一个意思吗？两者都给出了运行该文件的当前绝对目录。这可以通过以下事实得到证实：当我删除 __dirname 时，它仍然会在相同的根位置创建 build 文件（即使 webpack.config.js）文件不在根级别。即以下两个代码产生相同的结果：

与__dirname

  output: {
    assetModuleFilename: "images/[hash][ext][query]",
    path: path.resolve(__dirname, 'dist')
  },

没有__dirname：

  output: {
    assetModuleFilename: "images/[hash][ext][query]",
    path: path.resolve('dist')
  },

那么这里有什么需要使用__dirname？？

【问题讨论】：

标签： node.js reactjs webpack path

【解决方案1】：

您有权在您的场景中以相同的方式工作。

但这两者之间存在细微差别，我将尝试解释一下。

__dirname 在 Node 脚本中将为您提供当前 JS 文件所在位置的绝对路径。

另一方面，

path.resolve 为您提供绝对路径，如果不是从路径段构造，则默认为当前工作目录。（这是你的情况）。

where js file resides和currently working directory的路径有区别。

您如何找到这种差异？在您的应用中，您可以使用以下命令更改当前目录：processs.chdir(./example)。

现在，如果您检查您的地址，它们将不一样。 path.resolve 也会将此 /example 部分附加到您的路径中。 __dirname 仍然会在正确的路径上引用。

在您的情况下，它们的工作方式将完全相同，但 __dirname 是更强大的方法。

【讨论】：

当我运行npm run build 时，根目录中的package.json 文件正在使用我的代码中的path 变量。它没有其他用途，我无法从任何其他currently working directory 运行此命令，因为package.json 仅在根目录中。那么有什么用例为什么我们要在运行时更改目录？另外，除了我的情况，您能否举一个需要更改目录的示例。
另外，在我的情况下，imo 使用path.resolve 而不使用__dirname 似乎更健壮，因为我们通常希望在根目录本身中创建dist。如果webpack.config.js 文件不是根目录（例如{root}/config/webpack.config.js），那么使用__dirname 方法将在config 文件夹中创建dist，而其他方法仍将在根目录中创建它，这是首选。
在这里你可以找到与我上面给你的解释类似的解释：webpack.js.org/configuration/entry-context/#context。这是设置的不同部分，但我们通常想要实现的目标相同。你也可以按照我上面给你的步骤，创建example 文件夹，看看会发生什么情况。正如我已经说过的，这不是您目前的情况，但这就是我们这样做的原因之一。