WebPack 기본 정리

체계적인 설명보다는 제가 이해한 것들을 두서없이 적어놓았습니다.

기존 문제점

JS파일이 많아졌을때 각 파일들의 변수들이 서로의 스코프를 침범하지 않도록, 그리고 각 파일들의 실행순서를 올바르게 하기 위해 개발자들이 의존성을 일일이 파악해야는 불편함이 있었다. 만약 JS파일이 1억개라하면 개발자들이 모든 JS파일들의 의존성을 분석하는 것은 어렵다.

웹팩은 최상단 자바스크립트 파일에서 시작해 연결된 파일들을 타고 내려가며 의존성 그래프를 만들어낸다. 무엇이 무엇에 의존성을 가지고 있고 무엇이 무엇보다 먼저 포함되어야 하는지, 무엇을 분리해야하는지 분석하면서 자바스크립트 파일들을 조합해 하나 또는 여러 개의 번들(bundle)을 만든다. 

 

개발자는 파일들의 의존성을 파악할 필요 없이 웹팩이 만든 번들파일을 삽입시켜주기만 함으로써 편리함을 갖게 되었다.

 

웹팩의 4가지 개념

엔트리 :

엔트리는 의존성 그래프의 시작점인데, 엔트리에 웹의 전반적 구조가 담기게 된다.

엔트리에 지정된 파일을 가지고 의존성에 따라 번들링을 진행한다..

 

 

JS가 로딩하는 모듈이 많아질수록 모듈간 의존성이 증가하였다. 의존성 그래프의 시작을 엔트리라 하는데 웹팩은 엔트리를 통해 필요한 모듈을 로딩하고 하나의 파일로 묶어준다. 이를 모듈 번들링 이라고 한다.

 

둘다 같은말이래요

 

아웃풋 : 

번들된 결과물을 처리할 위치를 Output에 기록한다.

 

로더:

JS가 아닌 파일(html,css 등)을 웹팩이 이해하도록 변경해주는 역할

웹팩은 JSON,Javascript를 받아들이는데, 웹팩이 읽지 못하는 파일을 변환시켜준다.

간단한 예로 babel-loader가 있다.

바벨은 JSX, Typescript, ES6이상의 JS 문법을 모든 브라우저가 받아들일 수 있는 ES5버전의 JS로 변환시켜준다. 이를 통해 브라우저들의 호환성을 유지할 수 있다.

 

 

 

플러그인:

로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.

번들된 JS를 난독화하거나 특정텍스트를 추출하는 역할을 한다.