WebPack에 대해 알아보자

요새 패스트 캠퍼스 강의를 듣고 있다.

첫 번째 강의로 바닐라JS를 통한 개발을 하고 있는데 여기서 웹팩을 다뤘다.

기록 안 하면 또 까먹을 것 같아서 기록한다. 

 

일단 Webpack이란 무엇일까?

공식 사이트에 나온 내용은 웹팩은 모듈 번들러라고 한다.

모듈은 뭐고 번들은 뭘까?

아주 쉽게 설명하면 모듈은 각각의 각각의 자바 스크립트 파일, 번들은 그 파일들을 하나로 합친걸 말한다.

웹팩 공식 사이트에 이미지를 보면 이해가 쉽다

궁금증이 들었다.

하나로 합치는 게 도대체 뭐가 좋을까?

 

장점은 다음과 같다.

1. 여러 JS를 하나로 압축하기 때문에 로딩에 대한 네트워크 비용을 낮춰준다
2. 모듈 단위 개발이 가능해 가독성과 유지보수가 쉽다.
3. 최신 JS를 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환해준다.

나도 자세하게 알지 못하지만 사용자가 사이트에 접속하고 로딩되는 시간을 단축시켜주는데 도움이 된다고 한다.

 

이제 웹팩이 여러 파일들을 하나로 압축시켜준다는 사실을 알았으니 웹팩과 함께하는 JS 개발(일단 바닐라 JS) 환경설정을 해보자 

2023.01.04 - [React 개발일기/환경설정] - [WebPack & VanillaJS] 웹팩과 함께하는 바닐라JS 기본 환경 설정

[WebPack & VanillaJS] 웹팩과 함께하는 바닐라JS 기본 환경 설정