webpack 이란
모듈 번들러(Module Bundler)이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
모듈이란
모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다.
Math.js
function sum(a, b) {
return a + b;
}
function substract(a, b) {
return a - b;
}
const pi = 3.14;
export { sum, substract, pi }이 math.js 파일은 아래와 같이 3가지 기능을 갖고 있는 모듈이다.
두 숫자의 합을 구하는 sum() 함수
두 숫자의 차를 구하는 substract() 함수
원주율 값을 갖는 pi 상수
이처럼 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 된다.
웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 HTML, CSS, Javascript, Images, Font 등 웹 애플리케이션을 구성하는 모든 자원을 의미한다.
모듈 번들링이란
웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 한다.
여기서 빌드, 번들링, 변환, 컴파일 모두 같은 의미를 가진다.
webpack의 등장 배경
파일 단위의 자바스크립트 모듈 관리
자바스크립트의 변수 유효 범위는 기본적으로 전역 범위를 갖는다. 최대한 넓은 변수 범위를 갖기 때문에 어디에서도 접근하기가 편리하다. 하지만 두 개 이상의 모듈로 부터 자바스크립트 파일을 불러올 때 변수의 이름을 모두 기억하지 않은 이상 변수를 중복 선언하거나 의도치 않은 값을 할당할 수 있다.
웹 개발 작업 자동화 도구
이전에는 텍스트 편집기에서 코드를 수정하고 저장한 뒤 브라우저에서 새로 고침을 눌러야 화면에 변경된 내용을 볼 수 있었다. 하지만 웹팩을 사용하면서 그럴 필요가 없어졌다.
또 웹 서비스를 개발하고 웹 서버에 배포할 때 아래와 같은 작업들을 해야 했다.
- HTML, CSS, JS 압축
- 이미지 압축
- CSS 전처리기 변환
하지만 웹팩이 이 역할을 시행해준다.
웹 애플리케이션의 빠른 로딩 속도와 높은 성능
그동안 웹 사이트의 로딩 속도를 높이기 위해 브라우저에서 서버로 요청하는 파일 숫자를 줄여왔다. 이를 위해 웹 태스크 매니저 등을 이용해 파일들을 압축하고 병합하는 작업들을 진행했다. 또한 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원들은 나중에 요청하는 레이지 로딩(Lazy Loading)이 등장했다.
웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청한다.
webpack 적용 전과 후
-
UI에서 보이는 건 차이가 없음
-
적용 후 하나로 합쳐지기 때문에 webpack 적용 후 보내는 request 가 줄어들게 됨
-
웹 사이트 배포 전에 js 는 minifiers를 통해 압축과정(파일 용량 줄이기), linters라는 문법 보조 검사 기능, 호환이 가능한 자바스크립트 형태로 바벨을 통해 변환하는 compile to js language 시행하게 됨
-
gulp, grunt, etc 등과 다르게 웹팩은 진입점이 하나면 됨(다른 파일들은 웹팩이 알아서 해주겠다는 구조)
