웹팩..웨패..웊..어푸어푸💦

🔗
웹팩 핸드북 | 캡틴판교
웹팩(Webpack) 기본 사용법 (CLI) | Daleseo
웹팩(Webpack) 기본 설정법 (Entry/Output/Loader/Plugins) | Daleseo
웹팩 - 설치와 실행

• Entry 설정 기본값 : ./src/index.js
• Output 설정 기본값 : dist/main.js
• Entry 설정은 항상 프로젝트 디렉터리 내부이기 때문에 상대 경로로 하는 반면에,
  Output 설정은 항상 프로젝트 디렉터리 내부라는 보장이 없으므로 절대 경로로 한다.
• __dirname은 NodeJS에서 현재 프로젝트 디렉터리를 의미

NodeJS 의 Path 모듈

Node의 내장 모듈로서 Javascript에서 폴더와 파일의 경로를 쉽게 문자열로 만들어주는 유틸리티 모듈

const path = require('path');

Path 모듈에는 다양한 메소드가 있으나,
보통 인자로 path를 받고 메소드별로 적절하게 문자열 형태의 path를 리턴하는 형태이다.

Path.join()

• 인자로 받은 경로들을 하나로 합쳐서 문자열 형태로 path를 리턴

path.join('/foo/bar', './baz'); 
// => /foo/bar/baz

path.join('/foo/bar', '/tmp/file/'); 
// => /foo/bar/tmp/file/

Path.resolve()

• 전달받은 경로인자들의 가장 오른쪽부터 왼쪽으로 합쳐진다.
• 합쳐나가는중 / 를 만나면 절대경로로 인식해 나머지 경로인자들을 무시한다.
• 만약 / 를 끝까지 만나지 못하면 /현재경로/생성된경로 형태로 결과를 리턴한다.

path.resolve('/foo/bar', './baz'); 
// => /foo/bar/baz

path.resolve('/foo/bar', '/tmp/file/'); 
// => /tmp/file 

join ⚔ resolve

Node path.join() vs path.resolve()
Path.join()와 Path.resolve() 차이

• / 를 join 은 상대경로로 resolve 는 절대경로로 처리한다.

path.join('foo', '/bar', 'baz'); // => foo/bar/baz
path.resolve('foo', '/bar', 'baz'); // => /bar/baz (baz부터 시작해 /bar를 만나는 순간 종료)

__dirname

__dirname 과 결합했을 때 join 은 모두 결합하는 반면, resolve 은 오른쪽부터 /가 있는 부분까지만 결합한다.

path.join(__dirname,'/crr','/temp','/name','dir','..'); // => __dirname + /crr/temp/name
path.resolve(__dirname,'/crr','/temp','/name','dir','..'); // => __dirname + /name

'..'

.. 은 현재 경로에서 한단계 위의 상위경로를 의미한다.
💥 .. 의 왼쪽에 있는 한 개의 경로인자는 제외된다.

path.join('/temp','/abc','/name','dir','..'); // => /temp/abc/name
path.resolve('/temp','/abc','/name','dir','..'); // => /name 

path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
// => /foo/bar/baz/asdf
// 마지막에 합쳐진 `..` 로 인해 `quux`의 한 단계 위 경로로 이동하게 되어 `quux`가 결과값에서 제외됨

path.resolve('/wwwroot', 'static_files/png/', '../gif/image.gif');
// => /wwwroot/static_files/gif/image.gif