为什么 webpack 的入口点使用相对路径而输出 属性 中使用绝对路径？

Question

最近开始学习如何配置与 Webpack 模块捆绑器的反应。下面的代码是我到目前为止配置的一个简单代码。我从 Webpack.

的官方文档中获取了这段代码

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

我知道入口点是 webpack 开始打包过程的地方，输出告诉在哪里发出 webpack 创建的打包文件。

但是这里我很困惑为什么我们需要在入口路径中有一个相对路径而在输出路径中有一个绝对路径？

我试图从官方文档中搜索此信息，但没有找到任何参考资料。

Answer 1

入口路径没有必要是相对的。它也可以是绝对路径，因为幕后发生的事情是 custom join operation:

const join = (rootPath, request) => {
    if (!request) return normalize(rootPath);
    const requestType = getType(request);
    switch (requestType) {
        case PathType.AbsolutePosix:
            return posixNormalize(request);
        case PathType.AbsoluteWin:
            return winNormalize(request);
    }
    switch (getType(rootPath)) {
        case PathType.Normal:
        case PathType.Relative:
        case PathType.AbsolutePosix:
            return posixNormalize(`${rootPath}/${request}`);
        case PathType.AbsoluteWin:
            return winNormalize(`${rootPath}\${request}`);
    }
    /* ... */
};

因此，如果 rootPath 和 request 都是绝对值，那么将返回 request 的规范化版本。归一化是通过Node.js'normalize函数实现的（也依赖于环境，但作用相同）

来自 path.normalize docs:

The path.normalize() method normalizes the given path, resolving '..' and '.' segments.

然而，如果request不是绝对的，那么显然它是相对的，连接操作的结果将是规范化rootPath和[=14=组合后的结果路径].

现在让我们澄清一下 rootPath 和 request 是什么。默认情况下，rootPath 指向当前工作目录，因为它指的是 options.context 的 默认值 ，即 process.cwd()。因此，rootPath 指的是当前工作目录。
另一方面，简而言之，request 指的是您在代码段中为 entry 选项提供的路径。

也许一个例子可以说明这一点。假设我有一个名为 understanding-webpack 的存储库（实际上我有一个 here）。如果你克隆它，默认情况下 rootPath 将指向 home/user/Documents/understanding-webpack。如果 entry 的值为 src/foo.js，则 规范化路径 将为 home/user/Documents/understanding-webpack/src/foo.js.

但是，如前所述，entry 的值也可以是 绝对路径。您可以提供这样的绝对路径：

const config = {
  /* ... */
  entry: path.join(__dirname, 'src'),
  /* ... */
}

现在，正如我们所见，request 的规范化版本将被返回（即 path.join(__dirname, 'src')）。

当目录结构不常见时，提供绝对路径很有用，例如

- src
  - index.js
- webpack.config.js

例如，在the repo I was referring to earlier中，webpack配置文件在examples目录中。因此，每个 entry 值都是绝对值，否则生成的路径将始终为 /home/user/Documents/understanding-webpack/src/index.js。这是不需要的，因为 examples 部分不存在。

---

加入操作发生在here，在JoinRequestPlugin。