웹팩에 관하여

웹팩이란 무엇인지 알아보고 웹팩의 4가지 주요개념들을 알아봅니다. 관련 레포는 여기입니다.

웹팩이란?

웹팩이란 모듈 번들러입니다.
모듈(Module) 이란 구현 세부사항을 캡슐화하고 공개 API를 노출하여 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드조각입니다.
번들(Bundle) 이란 소프트웨어 및 일부 하드웨어와 함께 작동하는데 필요한 모든것을 포함하는 패키지 입니다.

모듈번들러 란 우리가 만들려는 '프로젝트'에 필요한 모든 코드조각(모듈)들을 포함시켜주는 도구입니다.

웹팩 은 프로젝트에 필요한 모든 의존성파일들을 하나의 번들파일로 만들어 주어 배포하기 쉽게 빌드해주는 도구입니다.

모듈번들러에 대한 자세한 글은 자바스크립트 모듈, 모듈 포맷, 모듈 로더와 모듈 번들러에 대한 10분 입문서 를 읽어보시기 바랍니다.

웹팩의 4가지 주요개념

웹팩에서 빌드를 할 때 주요개념이 크게 4가지가 존재합니다. 각각을 단계적으로 알아보고 다음 스텝에서 실제로 설정을 해보겠습니다.

• entry
• module
• plugins
• output

1단계 : entry

프로젝트가 구동되기 위해서는 다양한 의존성파일(모듈)들(js, html, css, img 등)이 존재하는데 이를 통해 의존성그래프가 생기기 마련입니다. 의존성 그래프의 시작점이 되는 부분이 entry 이며 보통 main.js 또는 index.js 라고 설정합니다.

2단계 : module

다양한 모듈들은 각각의 파일유형을 갖게됩니다. 이 단계에서는 각 모듈들을 모듈유형에 따라 어떻게 처리할지를 설정해줍니다. 유형들은 로더 라는것을 통해 처리되어 최종적으로 js 파일로 만들어집니다.

3단계 : plugins

2단계의 과정을 거치게되면 js 파일이 나오게됩니다. 해당 js 파일을 그대로 쓸 수도 있지만 최소화(minify), 난독화(uglify) 같은 기능들을 이용할 수 있는 재정련단계라고 볼 수 있습니다.

4단계 : output

3단계까지 끝나게되면 이름 그대로 출력입니다. 최종적으로 번들링되어 나올 파일에 대한 파일이름, 경로같은 것들을 지정해 줄 수 있습니다.