2018년 4월 3일 17:04

Webpack 컨셉

웹팩에 관하여

웹팩이란 무엇인지 알아보고 웹팩의 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단계까지 끝나게되면 이름 그대로 출력입니다. 최종적으로 번들링되어 나올 파일에 대한 파일이름, 경로같은 것들을 지정해 줄 수 있습니다.

©2022 heecheolman

Built with Gatsby