Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions day01hw/201402450현도훈
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
웹팩이란
201402450 현도훈

자바스크립트 코드가 많아지면서 하나의 파일로 관리하기 힘들어지는데 그렇다고 여러개의 파일을 부라우져에서 로딩하는것은 그만큼 비용이 든다. 또한 각 파일은 서로 스코프를 침범하지 않아야하는데 잘못 작성할 경우 변수 충돌의 위험이 있다.

자바스크립트는 즉시호출함수(IIFE)를 사용해서 모듈을 만들 수 있다. 하지만 여전히 브라우져에서는 파일 단위 모듈 시스템을 사용하는 것은 쉽지 않은 일이다. 모듈을 IIFE스타일로 변경해 주는 과정 뿐만 아니라 하나의 파일로 묶어 네트웍 비용을 최소화 할 수 있는 방법이 웹 프로트엔드 개발 과정에는 필요하다.

웹팩은 모듈 번들러이고 웹팩의 주요 네 가지 개념은 다음과 같다.

엔트리 : 웹팩에서 모든 것은 모듈이다. 자바스크립트, 스타일시트, 이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용하도록한다. 자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 의존성 그래프의 시작점을 웹팩에서는 엔트리라고 한다. 웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일로 묶는다.

아웃풋 : 엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶을 것이다. 번들된 결과물을 처리할 위치는 output에 기록한다.

로더 : 웹팩은 모든 파일을 모듈로 관리하는데, 자바스크립트 파일 뿐만 아니라 이미지, 폰트, 스타일시트도 전부 모듈로 관리한다. 그러나 웹팩은 자바스크립트 밖에 모른다. 비 자바스크립트 파일을 웹팩이 이해하게끔 변경해야하는데 로더가 그런 역할을 한다.

플러그인 : 로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.