Webpack路径处理：__dirname、path.join与path.resolve详解

Webpack 配置中的路径处理

在 Webpack 配置中，路径处理是构建工具的核心功能之一。path.join、path.resolve 和 __dirname 是 Node.js 提供的路径处理工具，用于拼接、解析路径和获取当前文件所在目录。理解它们的区别和用途对编写高效的 Webpack 配置至关重要。

---

__dirname 的基本概念

__dirname 是 Node.js 中的一个全局变量，表示当前执行脚本所在的目录绝对路径。它的值在脚本运行时确定，不会因文件被其他模块引用而改变。

console.log(__dirname);
// 输出：/Users/username/project/src

在 Webpack 配置中，__dirname 常用于指定入口文件、输出目录或其他资源的绝对路径。例如：

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

---

path.join 的用法

path.join 是 Node.js 的 path 模块提供的方法，用于将多个路径片段拼接成一个完整的路径。它会自动处理路径分隔符（如 / 或 \）并规范化结果。

const path = require('path');
const fullPath = path.join('/foo', 'bar', 'baz');
console.log(fullPath);
// 输出：/foo/bar/baz

在 Webpack 配置中，path.join 通常用于拼接相对路径，确保跨平台兼容性。例如：

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/assets'),
    filename: 'app.js'
  }
};

path.join 的优势在于它会自动处理不同操作系统的路径分隔符，避免手动拼接路径时可能出现的错误。

---

path.resolve 的用法

path.resolve 也是 path 模块提供的方法，用于将多个路径片段解析为一个绝对路径。它会从右到左依次解析路径，直到生成一个绝对路径为止。如果所有路径片段均为相对路径，则返回当前工作目录的绝对路径。

const path = require('path');
const absolutePath = path