웹팩이란 무엇일까?

웹팩의 등장 배경

웹팩의 등장배경은 여러가지가 있지만 모듈화와 HTTP요청이 있습니다.

1. 모듈화

기존 하나의 HTML에 여러 JS파일을 호출 시 스코프의 문제가 생겼습니다. 이를 해결하기 위해 IIFE라는 방식의 모듈화를 사용했습니다.

var math = math || {}

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

    math.sum = sum
})()

위와 같은 방식으로 네임스페이스를 통해 모듈화를 이룬 방식입니다.

 

NodeJS에서 기본적으로 사용하고 있는 CommonJS, AMD등과 같은 프로젝트가 이런 방식입니다.
이렇게 여러 모듈화를 하기위한 프로젝트들이 각개별로 생겨났습니다.

2. HTTP 요청

여러 파일을 하나로 번들링해 더 좋은 퍼포먼스 보일 수 있습니다.

웹팩?

모던 자바스크립트 애플리케이션을 위한 정적 번들러입니다.

여러 파일을 하나의 파일로 합치는 역할인 번들링을 하는것이 번들러입니다. 모듈의 의존성을 그래프로 보여주는 디펜던시 그래프를 만들어줍니다.

주요 컨셉

엔트리

디펜던시 그래프가 시작하는 부분입니다.

아웃풋

번들링된 파일이 생성된 경로입니다.

로더

기본적으로 웹팩은 .js파일을 번들링합니다. 하지만 리액트에서는 css와 같은 파일을 import해서 사용하곤 합니다. 이를 위해선 css-loader와 같은 추가적인 로더를 통해 확장자에 따라 각각의 로더를 통과하도록 해야합니다.

플러그인

번들링된 파일이나 데이터를 추가적으로 조작하기 위해 사용합니다.

Babel

그렇다면 바벨은 무엇일까요? ES6/ES7의 문법을 그 이전의 문법으로 컴파일해줍니다. ES6 이후의 문법을 지원하지 않는 브라우저에서도 작동할 수 있도록 변환합니다.

 

그 이외에도 JSX 문법을 네이티브한 자바스크립트로 컴파일합니다.