path.resolve, __dirname

Webpack 공식 문서를 읽다보면 경로 관련 속성에서 자주 등장하는 키워드가 있습니다.

path.resolve 와 __dirname 인데요. 대체 무엇인지 한번 알아보겠습니다.

---

1. path

우선 path를 먼저 알아볼게요.

 

path 모듈은 node.js 내장 API 입니다.

운영체제별로 경로 구분자가 달라 발생하는 문제를 해결하기 위해 탄생했습니다.

운영체제는 크게 Window 진영, POSIX 진영(macOS, Linux)으로 나뉘는데,

 

Window: ' \ ' (역슬레시)  

POSIX:   ' / ' (슬레시)

각각 위와 같은 구분자로 폴더를 구분합니다.

 

path 모듈의 메서드로 위와 같은 구분자 문제를 쉽게 해결할 수 있습니다. 

---

1-1. path.resolve

path.resolve([...paths])

경로 인자들을 오른쪽에서 부터 왼쪽으로 읽고, 조합하여 root 경로를 고려한 절대경로로 반환합니다.

---

오른쪽부터 읽다가 '/디렉터리' 같은 절대 경로 형식을 발견하면 해당 경로를 바로 반환합니다.

---

만약 인자를 전달하지 않으면 작업 중인 디렉터리(working directory)를 절대경로로 반환합니다.

---

2. __dirname

파일의 현재 경로를 나타내는 전역 변수입니다.

이 역시 운영체제별로 구분자가 다르게 표시됩니다.

---

3. path.resolve( __dirname, 'dist' ) 의 의미

 

드디어 webpack 설정파일에 자주 등장하던

path.resolve( __dirname, 'dist')의 의미를 알 수 있습니다!

일반적으로 dist 폴더와 webpack.config.js 파일은 프로젝트 root 경로에 위치하게 되는데요~!

이때 __dirname을 통해 root 경로를 기준으로하게 되고,

resolve 메서드로 인해 root + dist의 절대 경로를 반환하게 되는 것이죠. 

---

3. 절대경로를 권장하는 output.path

웹팩 공식문서에서는 output.path 속성을 절대경로로 설정할 것을 요구하고 있습니다.

(공식적인 이유는 찾을 수 없었어요. 추후 찾으면 추가하도록 하겠습니다.)

 

이때 팀원의 운영체제가 다름으로 인해 발생하는 구분자 이슈를 방지하기 위해

path.resolve와 __dirname을 함께 사용해 볼 수 있겠네요! 

포스팅은 여기까지 입니다.

 

 

 

기본이 중요하다.