最近开始学习如何使用Webpack模块bundler进行配置反应。下面的代码是我迄今为止配置的一个简单代码。我从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}`);
}
/* ... */
};
所以，如果rootPath和request都是绝对的，那么将返回request的归一化版本。规范化是通过Node.js的normalize函数实现的(这也取决于环境，但它实现了相同的目的)。
来自path.normalize文档：
path.normalize()方法规范化给定路径，解析".."one_answers"。"分段。
然而，如果request不是绝对的，那么它显然是相对的，并且联接运算的结果将是对rootPath和request的组合进行归一化后的结果路径。
现在让我们澄清一下rootPath和request是什么。默认情况下，rootPath指向当前工作目录，因为它指的是options.context的默认值，即process.cwd()。因此，rootPath是指当前的工作目录
另一方面，简明地说，request是指您在代码段中为entry选项提供的路径。
也许一个例子可以说明这一点。假设我有一个名为understanding-webpack的回购(这里实际上有一个)。如果克隆它，默认情况下，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中。