如何简化webpack.common.js中引用public目录的路径写法？

数据老陈

2026-8-7

问题

我的项目文件夹结构如下：

public
source
  client
    config
      webpack.common.js

我需要在webpack.common.js中引用public目录，目前使用的写法是：

path.resolve(__dirname, '../', '../', '../', 'public')

该写法虽然可行，但冗长繁琐，请问是否有更优的实现方式？

优化方案

以下是几种更简洁易维护的实现方式：

简化path.resolve的路径片段
path.resolve支持直接合并多层级的路径回溯，不需要拆分多个../，可以直接写成：
```
path.resolve(__dirname, '../../../public')
```
或者拆分片段的写法：
```
path.resolve(__dirname, '../../..', 'public')
```
两种写法和原代码功能完全一致，但更简洁直观。
定义项目根目录复用路径
如果项目中多处需要引用根目录下的文件，可以先定义根目录的绝对路径，再基于它拼接public目录，后续维护更方便：
```
// 获取项目根目录（public和source的共同父级目录）
const rootDir = path.resolve(__dirname, '../../../');
// 引用public目录
const publicDir = path.resolve(rootDir, 'public');
```
后续如果目录结构调整，只需要修改rootDir的定义即可，无需逐个修改所有路径引用。
使用path.join实现（注意适用场景）
若只是单纯拼接路径，也可以用path.join，效果和上述写法一致：
```
path.join(__dirname, '../../../public')
```
需注意path.join仅做路径片段拼接，而path.resolve会生成绝对路径并解析特殊符号，webpack配置中通常更推荐resolve来确保路径绝对可靠。