为何Webpack配置必须使用path.resolve与path.join？

嘿，这个问题问到点子上了——很多刚开始折腾Webpack的同学都会觉得「不就是个路径吗？写个相对字符串咋就不行了」，但其实这里面藏着不少容易踩的坑，我给你拆解清楚：

1. 跨平台兼容性是刚需 #

不同操作系统的路径分隔符不一样：Windows用的是反斜杠\，而macOS/Linux用的是正斜杠/。如果你直接写死../dist这种字符串，在Windows环境下运行Webpack时，路径解析很可能会出错。

而path.resolve和path.join是Node.js内置的路径处理方法，会自动根据当前操作系统替换成对应的分隔符，完美解决跨平台适配问题，不用你手动改来改去。

2. 绝对路径能避免「启动目录」带来的坑 #

Webpack解析相对路径时，是基于你执行Webpack命令的当前工作目录，而不是配置文件所在的目录！这就很容易出问题：

• 比如你在项目根目录运行webpack，写../dist（假设配置文件在config/文件夹）是能找到根目录的dist；
• 但如果某天你从src/文件夹里执行webpack --config ../config/webpack.config.js，或者甚至从电脑的其他目录（比如~/Desktop）远程调用配置文件，那../dist就会指向当前工作目录的上级，完全偏离你的项目目录。

而path.resolve(__dirname, '../dist')里的__dirname是Node.js提供的内置变量，代表当前配置文件所在的绝对路径，不管你从哪里启动Webpack，这个路径都会被解析成项目根目录下的dist，绝对不会跑偏。

3. 自动处理路径冗余，更可靠 #

手动写的相对路径可能会有多余的../、./或者重复的分隔符，比如../.././dist这种奇怪的写法，Webpack虽然有时候能解析，但难保不会出现意外的错误。

path.resolve和path.join会自动清理这些冗余内容，把路径转换成规范的格式，比如path.resolve('/a/b/c', '../../dist')会被处理成/a/dist，稳定性拉满。

4. 可读性和维护性更强 #

用path.resolve(__dirname, '../dist')这种写法，其他开发者一眼就能看出来：「哦，这是基于配置文件所在目录，往上跳一级找dist文件夹」。而单纯的../dist，如果项目结构复杂、路径层级多，别人可能要琢磨半天这个相对路径是相对于哪个目录的，维护成本更高。

举个你给出的配置例子：

output: { 
  filename: '[name].js', 
  path: path.resolve(__dirname, '../dist'), 
  chunkFilename: 'js/[name].[chunkhash].js' 
}

这里用path.resolve(__dirname, '../dist')，不管你的项目部署在什么系统、不管你从哪个目录启动构建，最终都会把打包产物放到项目根目录的dist文件夹里，完全不用担心里程碑式的路径错误。

内容的提问来源于stack exchange，提问作者Deng Zhebin