Webpack == 모듈번들러 == "코드를 변환시켜서 통합시킨다"
웹팩은 코드를 변환시켜주고, 파일을 관리하고 좋은 플러그인들도 제공한다
그리고 웹팩은 그냥 자바스크립트이기 때문에, 커스터마이징이 가능하다.
예를 들어서 최신 자바스크립트인 ES6은 브라우저에서 완벽하게 모든것을 이해할 수 없다.
그래서 브라우저가 완벽하게 이해하게끔 오래된 JS파일로 변환을 시켜주는게 웹팩이 하는일이다.
마찬가지로 SCSS를 사용했다면, 그냥 CSS형태로 바꿔서 브라우저가 완벽하게 받아들이게끔 만든다
웹팩의 4가지 요소
1. Entry
웹팩이 변환할 파일이 무엇인지, 어디에있는지
2. OutPut
변환을 마친후에 변환된 파일을 어디에 놓을지
3. Loaders
웹팩이 어떤 파일을 어떻게 변환시킬지
( SCSS를 관리하는 로더, JS를 관리하는 로더 ... )
4. Plugins
파일들을 각각의 로더로 변환시킨후에, 전체코드를 어떻게 변환할지
Loader 동작 방식
- 파일을 살펴보고 로더에 의한 변환이 필요한지 결정
- 변환이 필요하다면 어떻게 변환을 할지 결정
웹팩은 모든 파일을 모듈로 취급한다
웹팩은 자바스크립트만 이해한다
웹팩은 여러개의 엔트리를 가질 수 있지만, 하나의 아웃풋만을 가질 수 있다.
댓글
댓글 쓰기