webpack 알아보기

react를 사용하면서 항상 CRA를 사용해서 Webpack이라는 용어는 낯설로 어색했다. 

근데 그러면서도 이건 도대체 뭘까? (특히, eslint 다룰때 많이 궁금했음)

이제 부트캠프도 끝이 났고, 시간도 있겠다. 궁금했던 내용에 대해 공부해보려고 찾아봤다. 

 

사전적 내용

웹팩(Webpack)은 현대적인 웹 개발에서 사용되는 정적 모듈 번들러(static module bundler)입니다. 웹팩은 프론트엔드 애플리케이션의 자원(JavaScript, CSS, 이미지 등)을 모듈로 간주하고, 이를 종속성 그래프(dependency graph)로 분석하여 하나 이상의 번들(bundle)로 묶어줍니다.
웹팩은 애플리케이션을 구성하는 모든 자원을 로드하고 의존성을 해결하여 최종 번들을 생성합니다. 이렇게 번들된 자원은 웹 서버를 통해 클라이언트로 전송되고, 브라우저에서 실행됩니다. 웹팩은 애플리케이션의 크기를 최소화하고 로딩 속도를 향상시키는 등의 성능 이점을 제공합니다.
웹팩은 주로 JavaScript 모듈 번들링에 사용되지만, CSS, 이미지, 폰트 등 다양한 유형의 자원도 처리할 수 있습니다. 또한 로더(loaders)와 플러그인(plugins)을 통해 개발 작업을 자동화하고 다양한 기능을 추가할 수 있습니다. 웹팩은 모듈 시스템(CommonJS, ES Modules)을 지원하며, 번들링된 결과를 통해 모듈 간의 의존성 관리가 가능해집니다.

 

공식홈페이지에 보면 다음과 같은 이미지를 찾을 수 있다. 

 

사전적 지식만으로는 솔직히 어떤것인지 체감이 되지 않는다. 그냥 이런게 있구나 수준? 

 

webpack에서 자주나오는 말이 있는데 bundle이라는 단어가 있다.

 

bundle 미국∙영국 [ˈbʌndl]  영국식  1. [명사] 꾸러미, 묶음, 보따리
2. [명사] (함께 팔리거나 딸려 나오는 물건들의) 묶음, 일단
3. [동사] ~을 마구 싸 보내다[밀어 넣다]
4. [동사] 무리 지어 가다

 

그래서 사전을찾아봤더니, 묶음 이라는 뜻이 나오고 그림과 비교를 해봤을 때, 결국 JavaScript, CSS, 이미지 등 하나의 파일로 묶어주는 것이 bundle이지 않을까 싶다. 

 

 

지금은 크게 이해가 되진 않으니 하나하나 만들면서 알아가봐야겠다.