회사에서 Webpack 을 사용하고 있음에도 자세히 몰랐었는데,
(😅웹팩.. 그냥 번들링하는애..아닌가요 의 수준?)
Webpack 이 무엇인지! 그리고 왜 필요한지! 어떤 기능들을 제공하는지!
에 대해 공부해보고 정리해 보았습니다!
Webpack 이란?
Webpack 에 대한 정의를 구글 검색창에 검색해 봤을때, 아마 여러분들은 아래와 같은 문장을 만나게 될 것입니다.
Webpack은 자바스크립트 애플리케이션을 위한 모듈 번들러입니다.
저 또한 이 문장을 보고 모듈.. 번들러요..? 그게 뭔데요..? 싶었기 때문에 먼저 모듈과 번들러에 대해 알아보겠습니다!
모듈 이란?
자바스크립트에서의 모듈 이라는 개념은 특정 기능을 갖는 작은 코드 단위 를 의미합니다.
// math.js
function sum(a, b) {
return a + b;
}
function substract(a, b) {
return a - b;
}
const pi = 3.14;
export { sum, substract, pi } //ES6 Modules 문법- 위 예시에서, main.js 라는 파일은 sum(), substract(), pi 기능을 갖고있는 모듈 입니다.
Webpack 에서의 모듈 이라는 개념은 웹 애플리케이션을 구성하는 모든 자원(HTML,CSS, JS, Image, Font 등)을 의미합니다.
번들러란?
의존성이 있는 모듈 코드를 하나(또는 여러 개)의 파일로 병합 및 압축해주는 도구를 의미합니다.
Webpack 의 등장 배경
- 파일 단위의 자바스크립트 모듈 관리의 필요성
- 두 자바스트립트 파일에서 이름이 같은 변수를 사용하고 있고 index.html 에서 이 변수를 조회한다면 뒤에 위치한 (script tag 가 뒤에 위치한) 자바스크립트 파일에서 할당한 값으로 조회될 것이다. 이에 따라 원치 않는 변수의 재할당 및 중복 선언이 가능해진다..!
- 파일 단위로 변수 관리 및 자바스크립트 모듈화를 위해 기존에는 AMD, Common.js 와 같은 라이브러리를 사용함
- 웹 개발 작업 자동화 도구
- 웹 서비스 개발 후 웹 서버 배포 시 해야할 작업(파일 압축, CSS 전처리기 변환)의 자동화
- 기존에는 Grunt, Gulp 사용
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
- 파일 압축 및 병합으로 브라우저에서 서버로 요청하는 파일의 크기와 숫자를 줄여 빠르게 로드될 수 있도록 함
- 초기 페이지 로딩 속도를 위해 나중에 필요한 자원은 나중에 요청하는 레이지 로딩 지원
Webpack 기능 정리
- 파일 내용 기반 파일 이름에 해시값을 추가하여 효율적으로 브라우저 캐싱 이용
- 모듈 시스템 (CommonJS, AMD, ES6 Module(v2부터)) 지원
- 자바스크립트뿐만 아니라 CSS, Image 파일 등 리소스의 의존성 관리 (CSS/Sass/Less 내부에서 사용하는
@import,url(...)구문이나 HTML 내부의<img src=...>태그 등) - 트랜스파일 외 Minify/Uglify, Banner, CSS Preprocess 작업을 자동화해 주는 Task Runner 기능
- 트랜스파일 : 특정 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환 (typescript -> javascript / ES6+ -> ES5)
- 컴파일 : 특정 언어로 작성된 소스 코드를 다른 언어로 변환 (c -> 기계어)
- Code Spliting : 지금 당장 필요한 코드가 아니라면 따로 분리시켜, 나중에 필요할때 불러와서 사용한다면 자바스크립트의 파일 용량을 줄일 수 있다.
- Dynamic imports(Lazy Loading) : 앱의 빌드 과정에서 모든 모듈을 불러오는 것이 아니라, 런타임에 불러와 처음 불러오는 파일의 용량을 줄이는 최적화 방법
- Tree Shaking : ES6의 Modules 문법을 사용해 사용하지 않는 코드를 제거하는 최적한 방법.
- Dev Server(Node.js Express 웹서버) : 개발용 서버 제공
참고
- Webpack 핸드북
https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html- [Naver D2] JavaScript 모듈화 도구, webpack
https://d2.naver.com/helloworld/0239818- [TOAST UI] 번들러
https://ui.toast.com/fe-guide/ko_BUNDLER#webpack-%EC%86%8C%EA%B0%9C
프론트가 좋아요