웹팩이란?
웹팩은 자바스크립트를 더 잘 다루기위해선 필수적이다.
그래서 웹팩이 뭘까?
개발을 하다보면 정말 많은 파일들이 생기는데 여기서 생기는 문제점은 웹사이트의 로딩속도가 느려질 수 있고, 수많은 패키지들을 사용다하보면 변수나 함수명의 충돌이 발생할 수 있다.
이런 문제점을 해결하기위해 번들러가 등장했다.
번들러에는 대표적으로 WebPack, Broserify, Parcel이 있는데 그 중 가장 많이 쓰이는 것이 바로 웹팩!
웹팩을 사용하면 하나의 자바스크립트 파일에 JS파일 뿐 아닌 CSS, Image와 같은 여러가지 모듈들을 넣을 수 있다.
우선 웹팩의 이해를위해 웹팩 없이 개발을 한다면 어떨지 먼저 살펴보자.
아래와 같이 hello와 world 각각의 파일을 html로 불러오고있고
각각의 파일의 변수명이 동일하다.
웹사이트에서 hello world 모두 띄워주고싶은데
변수명이 world로 덮어 씌워지고있어 world만 출력해주고있다.
실제 프로젝트에서 이름 충돌이 심각한 문제이기때문에
이런 문제의 해결을 위해 모듈이 생겨났다.
하지만, 여전히 문제점이있다.
지금은 hello.js와 world.js 두개의 파일이지만 프로젝트를 하다보면 수백개의 파일이 생성될텐데
네트워크 부하와 부정적인 사용자 경험의 결과를 가져올 것이다.
그래서 생겨난 것이 번들러!
웹팩이란?
여러개의 파일을 하나의 파일로 묶어주는 개발 자동화 도구
여러 파일들의 압축이나 css전처리기 변환등의 번거러운 작업들을 자동으로 수행
파일을 묶는 과정에서 여러가지 작업들이 실행되도록 작업 계획을 세워주기도 한다.
sass, typescript, jsx와 같은 언어들을 네이티브 언어로 컴파일 해주거나
개발 중에 파일이 수정 되었을 때 자동으로 브라우저의 내용을 리로드 해주는 등의 작업을 한다.
- 웹팩이란? 모듈 번들러란?
웹팩이란 최근 가장 많이 사용되고있는 모듈 번들러 중 하나이다. 모듈 번들러는 웹 앱을 구성하는 수많은 자원들을 하나의 파일로 병합 및 압축 해주는 도구! 웹팩을 사용하는 대표적인 이유에는 웹팩을 사용해 여러 개의 자바스크립트 파일을 하나의 파일로 컴파일할 수 있다. 따라서 SPA개발 시 html에는 컴파일된 하나의 자바스크립트 파일만 포함시키면 된다.
[이고잉님의 생활코딩 웹팩 강의], [landvibe님의 블로그]를 참고하여 공부한 내용입니다.