study 공유 4

webpack

웹팩은 ‘모듈 번들러(Module Bundler)’라고 말합니다.
모듈 번들러란 모듈을 하나로 합친다는 뜻입니다.
여기서 의미하는 모듈이란 무엇일까요?

구글 검색해보면 모듈의 의미를 다음과 같이 설명합니다.

모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다.
자바스크립트로 치면 아래와 같은 코드가 모듈이다.

function sum(a, b) {
    return a+b;
}

function substract(a, b) {
    return a-b;
}

const pi = 3.14;

export { sum, substract, pi };

하지만 웹팩에서의 모듈은 의미가 좀 넓습니다.
웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미합니다.
즉, 웹 애플리케이션을 구성하는 자바스크립트, CSS, HTML, Images 등등.. 모든 것을 아우르는 말입니다.
즉, 웹 애플리케이션을 구성하는 모든 자원을 하나로 합쳐 내보낸다는 뜻입니다.

왜 개발자들은 웹팩을 사용할까?

웹 개발자들이 많이 사용하는 FE 프레임워크(뷰, 리액트, 앵귤러 등등)에선 대부분 웹팩을 사용합니다.
왜 웹팩을 사용할까요?

우선 Gulp와 Grunt에 대해 짚고 넘어가봅시다.

위 이미지는 프론트엔드 센터라는 페이지에 있는 걸프와 그런트의 기능을 그림으로 그려놓은 것입니다.
걸프와 그런트는 웹 테스크 매니저라고 불립니다.
쉽게 말해 웹 자동화 도구라고 생각하시면 됩니다.

웹 자동화 도구가 하는 역할은 아래와 같습니다.

자바스크립트

1. minifier : 압축 -> 파일용량 줄이기 -> 웹페이지 로딩속도 개선
2. linters : 문법검사도구 -> 에러 최소화
3. compile to languages : babel 같은 도구로 es6 문법을 es5로 번역 -> 크로스브라우징 등등

CSS

1. pre-processor(전처리기) : sass, scss, less… 등등

ASSETS

1. svgo
2. imagemin 등등

여기서 주목해야될 점은 그런트와 걸프라는 웹 테스크 매니저(웹 자동화 도구)는 각각의 파일들을 유형별로 내보낸다는 것입니다.

위 그림처럼 js파일은 js파일로, css파일은 css파일로.. 이렇게 유형별로 따로따로 나눠서 내보냅니다.

그리고 그런트와 걸프는 스크립트를 직접 작성해줘야 합니다.

const { src, dest } = require('gulp');

function copy() {
    return src('input/*.js')
        .pipe(dest('output/'));
}

exports.copy = copy;

이런식으로 말이죠.
걸프와 그런트는 위와같이 스크립트를 작성하는 것이 개발자들의 몫입니다.

하지만 웹팩은 다릅니다.
위와 같이 스크립트를 직접 손수 작성하는 것이 아니라
이미 다 설정이 되어있고, 그 설정 방법에 대해 아시면 오히려 걸프와 그런트보다 훨씬 더 수월하게 웹 애플리케이션을 만들 수 있습니다.

그리고 무엇보다도 가장 큰 특징은 모듈 번들러 기능까지 들어가 있다는 것입니다.
걸프와 그런트는 모듈 번들러 기능이 없습니다.
파일 유형별로 따로따로 작업하기 때문입니다.

하지만 웹팩은 파일을 유형별로 나누지 않고

위 그림처럼 모든 모듈을 번들링합니다.
맨 위의 진입점(entry) 하나만 들어가면 그 후는 알아서 연관관계를 파악해 웹팩에서 해석을 합니다.

이렇기 때문에 성능도 웹팩으로 작업한 것이 더 낫고, 그렇기에 모던 웹 개발 방식에 더 적합한 방식이라는 평을 받고있습니다.
그렇기 때문에 뷰, 리액트, 애귤러 같은 FE 프레임워크에서도 사용하고 있는 것입니다.