[웹팩]

웹팩

프로덕션 레벨에서 자바스크립트 프레임워크나 라이브러리를 사용하려면 고려해야 할 사항이 많습니다. 이때 사용할수 있는 도구가 웹팩 입니다.  

 

modularity, network performance 

웹팩은 모듈 번들러입니다. 모듈 번들러는 여러 파일들을 한 파일로 묶어줍니다. 
의존관계가 있는 여러 파일들을 묶은 번들은 브라우저가 한번만 읽기 때문에 네트워크 성능이 좋아집니다. 
 - 모든 의존 관계를 한 파일에 넣으면 모든 파일을 단 한번의 http 요청으로 가져올 수 있으므로 추가 시간 지연을 방지할 수 있다. 

 

컴파일 외 기능들

* 코드 분리 : 코드를 여러 덩어리로 나눠서 필요할때 각각 로딩할 수 있습니다. 다른 페이지나 디바이스에서 필요한 자원을 따로 나눠서 더 효율적으로 처리하기 위함입니다.
* 코드 축소 : 공백, 줄바꿈 등 불필요한 코드를 없애서 파일 크기를 줄여줍니다.
* feature flagging : 환경에따라서 코드를 맞춥니다. 
* hot module replacement:  소스 코드가 바뀌는지 감지해서 변경된 모듈만 즉시 갱신합니다. 

 

웹팩 모듈러를 사용할때 갖는 장점 

* 모듈성 : 모듈 패턴을 사용하여 모듈을 외부에 export하고 나중에 필요한곳에서  import를 사용하게 되면 애플리케이션 소스 코드를 더 관리하기 쉬운 규모로 나눌 수 있습니다. 
* 조합 : 재사용이 쉬운 리액트 컴포넌트를 구축할 수 있습니다. 
* 속도 :  모든 애플리케이션 모듈과 의존 관계를 하나의 클라이언트 번들로 묶으면 발생할수 있는 시간 지연이 없어져서 로딩 속도가 빨라집니다. 애플리케이션을 모두 한 파일에 패키징하면 클라이언트에서 단 한번만 http요청을 보내면 됩니다. 
* 일관성 : 웹팩이 jsx나 자바스크립트를 컴파일해주기 떄문에 프로젝트에서 아직 표준화되지 않은 문법을 사용할 수 있습니다. (바벨) 

 

웹팩 버전 4.0 부터는 프로젝트를 번들하기 위해 설정 파일을 만들지 않아도 웹팩이 디폴트 방식을 사용합니다. 하지만 설정 파일을 사용하면 설정을 원하는대로 커스텀화 할 수 있습니다. (디폴트 설정 파일 : webpack.config.js) 

 

예시 앱 ) recipe-app

이 앱의 시작 파일은 index.js입니다. index.js는 React, ReactDOM, 컴포넌트 파일을 import 합니다. 브라우저에서 가장 먼저 실행해야 하는 부분 이 이 부분입니다. 웹팩은 import문을 발견할 때마다 해당 모듈을찾아서 번들에 포함시킵니다. 

index.js => Menu.js import 

Menu.js => Recipe.js import 

Recipe.js => Instructions.js , IngredientsList.js import  

...... 

웹팩은 이런 트리를 쫓아가면서 필요한 모듈을 모두 번들에 넣어줍니다. 이 모든 파일을 순회하면 dependency graph가 생기게 되는거죵 

( * dependency graph : 컴포넌트 파일이나 라이브러리 파일, 이미지 등 앱에게 필요한 요소 ) 

그래프에서 각각의 파일을 원으로 표현하면, 웹팩은 그래프를 만들기 위해 원과 원 사이에 선을 그어줍니다. 이렇게 만들어진 그래프 전체가 번들입니다. 

import 문이 브라우저에서 작동할수 있는 이유는 바벨이 import 를 require('모듈/경로')로 변환하기 때문입니다.