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

苏布拉托·帕特奈克

最近开始学习如何使用 Webpack 模块打包器进行配置响应。下面的代码是我迄今为止配置的一个简单代码。我从Webpack的官方文档中获取了这段代码

const path = require('path');

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

我知道入口点是 webpack 开始捆绑过程的点,输出告诉在哪里发出 webpack 创建的捆绑文件。

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

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

安德烈·格泰伊

入口路径不必是相对的。它也可以是绝对路径,因为幕后发生的是自定义连接操作

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}`);
    }
    /* ... */
};

因此,如果rootPathrequest都是绝对的,则将request返回的规范化版本规范化是通过 Node.js 的normalize函数来实现的(这也取决于环境,但它实现了相同的目的)。

path.normalize文档

path.normalize() 方法规范化给定的路径,解析 '..' 和 '.' 段。

但是,如果request不是绝对的,那么显然它是相对的,连接操作的结果将是rootPath的组合规范化后的结果路径request

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

也许一个例子可以澄清这一点。假设我有一个名为的 repo 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

例如,在我之前提到的 repo 中,webpack 配置文件位于examples目录中。因此,每个entry值都是绝对值,否则生成的路径将始终为/home/user/Documents/understanding-webpack/src/index.js. 这是不希望的,因为该examples部件不存在。


联接操作发生在这里,在JoinRequestPlugin

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章