最近开始学习如何使用 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}`);
}
/* ... */
};
因此,如果rootPath
和request
都是绝对的,则将request
返回的规范化版本。规范化是通过 Node.js 的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] 删除。
我来说两句