webpack配置中path.resolve为何要搭配__dirname使用？

首先明确两个变量的本质：

• __dirname 是Node.js原生提供的固定变量，永远返回当前执行的JS文件（此处为webpack.config.js）所在目录的绝对路径，和你在哪个目录执行webpack命令无关
• path.resolve() 传入相对路径时，会以你执行webpack命令时的当前工作目录（即process.cwd()） 为基准拼接绝对路径

为什么你测试时结果一致 #

你遇到的运行结果相同只是巧合：刚好你每次执行webpack命令的工作目录，和你预期生成dist的目标目录匹配，所以两种写法解析出来的路径刚好重合。比如你把webpack.config.js放在子目录，但每次都是在项目根目录执行编译命令，不带__dirname的path.resolve('dist')就会基于根目录解析，刚好符合你要的根目录生成dist的预期。

为什么必须推荐加__dirname #

不带__dirname的写法强依赖执行命令时的工作目录，一旦执行目录变了，产物生成位置就会偏离预期，常见的出问题场景包括：

• 你切换到其他子目录执行webpack命令，比如在src目录下执行npx webpack --config ../webpack.config.js，不带__dirname的写法会把dist生成在src目录下
• 你的项目把webpack配置统一收在build等子目录下托管，后续调整配置文件位置时，不带__dirname的写法会出现路径解析错位

加__dirname的核心价值是让路径解析完全和执行命令的工作目录解耦，不管你在哪个位置执行webpack命令，都会按照配置文件的位置为基准生成固定路径的产物，行为完全可预期。

比如如果你的webpack.config.js放在项目根目录下的build子目录，想要在根目录生成dist，就可以固定写成path.resolve(__dirname, '../dist')，不管你在哪执行命令，路径解析结果永远正确。

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