[Webpack] Webpack 이란 ?

웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 오픈소스 JS 모듈 번들러(Module Bundler)로, 여러 개로 나누어져 있는 파일들을 하나의 JS 코드로 압축하고 최적화하는 라이브러리입니다.

 

모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.

 

모듈(Module)이란 무엇인가

모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다.

 

성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 됩니다.

 

웹팩에서의 모듈이란 ?

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

 

웹 애플리케이션을 제작하려면 HTML, CSS, Javascript, Images, Font 등 많은 파일들이 필요하죠. 이 파일 하나하나가 모두 모듈입니다.

 

모듈 번들링이란 ?

웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 합니다.

 

💡 빌드, 번들링, 변환 이 세 단어 모두 같은 의미입니다.

웹팩이 등장하게 된 배경

1. 파일 단위의 자바스크립트 모듈 관리의 필요성

2. 웹 개발 작업 자동화 도구

3.웹 애플리케이션의 빠른 로딩 속도와 높은 성능

 

웹팩의 장점

1. 여러 파일의 JS 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다.
2. 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉽다.

 

출처 : https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EB%AA%A8%EB%93%88-%EB%B2%88%EB%93%A4%EB%A7%81%EC%9D%B4%EB%9E%80

웹팩이란? | 웹팩 핸드북