22.11.22 : CRA없이 프로젝트 생성하기-2 (웹팩 알아보기)

웹팩

최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러. 모듈 번들러란 웹페이지를 구성하는 자원들(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해 병합된 하나의 결과물을 만드는 도구를 의미한다.

프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다.

웹팩에서의 모듈은 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다.

웹 애플리케이션을 제작하려면 HTML, CSS, JavaScript, Images, Font 등 많은 파일들이 필요하다. 이 모든것이 모듈이다.

웹 애플리케이션을 구성하는 많은 자원들을 하나의 파일로 병합, 압축 해주는 동작

웹팩은 자바스크립트만을 위한 것이 아니다. 웹 페이지를 구성하는 모든 리소스를 변환해 준다.

1. 웹페이지를 구현 했을 때 좋지않은 성능을 개선하기 위해

웹 태스크 매니저를 이용해 브라우저에서 서버에서 요청하는 파일 숫자를 줄이기: 파일들을 압축하고 병합하는 작업들을 진행

초기 페이지 로딩 속도를 높이기 위해 Code Splitting, Lazy Loading(필요한 자원을 나중에 요청) 등장

2. 파일 단위로 자바스크립트 모듈을 관리하기 위해서

복잡한 애플리케이션을 만들게 되면 변수를 중복 선언하거나 의도치 않은 값을 할당하게 될 수 있다. 서로 다른 파일을 로딩하여 사용하게 되면 이런 경우 의도치 않은 결과가 나올 수 있다. 때문에 파일 단위로 변수를 관리하고 싶은 욕구가 생겨나게 되었다.

(웹팩의 등장 전에는 AMD, Commond.js 같은 라이브러리를 사용함)

3. 웹 개발 작업 자동화

텍스트 편집기에서 코드를 수정하고 저장한뒤 브라우저에서 새로고침 눌러야 화면에 반영된 모습 보였었음.

HTML, CSS, JS 압축, 이미지 압축, CSS 전처리기 변환 자동화 위해 ==> 웹 태스크 매니저 Grunt, Gulp 등장