diff --git "a/day01hw/201402450\355\230\204\353\217\204\355\233\210" "b/day01hw/201402450\355\230\204\353\217\204\355\233\210" new file mode 100644 index 0000000..800337b --- /dev/null +++ "b/day01hw/201402450\355\230\204\353\217\204\355\233\210" @@ -0,0 +1,16 @@ +웹팩이란 +201402450 현도훈 + +자바스크립트 코드가 많아지면서 하나의 파일로 관리하기 힘들어지는데 그렇다고 여러개의 파일을 부라우져에서 로딩하는것은 그만큼 비용이 든다. 또한 각 파일은 서로 스코프를 침범하지 않아야하는데 잘못 작성할 경우 변수 충돌의 위험이 있다. + +자바스크립트는 즉시호출함수(IIFE)를 사용해서 모듈을 만들 수 있다. 하지만 여전히 브라우져에서는 파일 단위 모듈 시스템을 사용하는 것은 쉽지 않은 일이다. 모듈을 IIFE스타일로 변경해 주는 과정 뿐만 아니라 하나의 파일로 묶어 네트웍 비용을 최소화 할 수 있는 방법이 웹 프로트엔드 개발 과정에는 필요하다. + +웹팩은 모듈 번들러이고 웹팩의 주요 네 가지 개념은 다음과 같다. + +엔트리 : 웹팩에서 모든 것은 모듈이다. 자바스크립트, 스타일시트, 이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용하도록한다. 자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 의존성 그래프의 시작점을 웹팩에서는 엔트리라고 한다. 웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일로 묶는다. + +아웃풋 : 엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶을 것이다. 번들된 결과물을 처리할 위치는 output에 기록한다. + +로더 : 웹팩은 모든 파일을 모듈로 관리하는데, 자바스크립트 파일 뿐만 아니라 이미지, 폰트, 스타일시트도 전부 모듈로 관리한다. 그러나 웹팩은 자바스크립트 밖에 모른다. 비 자바스크립트 파일을 웹팩이 이해하게끔 변경해야하는데 로더가 그런 역할을 한다. + +플러그인 : 로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.