Webpack 파헤치기 1 - Webpack 알아보기

Webpack이란 뭘까?

webpack은 가장 대중적으로 사용되고 있는 Module Bundler입니다. Bundler는 흩어져있는 많은 파일들을 모아 하나의 파일로 묶어주는 것을 의미합니다. 웹 개발이 복잡해지면서 하나의 서비스를 구현하기 위해 JS 파일들을 비롯해 많은 html, css 등이 필요해졌습니다. 많은 파일들은 그 크기가 무거워지고 관리를 어렵게 만들고 말았지요. 문제를 해결하기 위해 webpack, Parcel, Gulp 등 다양한 라이브러리가 등장했고, 그 중에서도 가장 대표적으로 쓰이고 있는 Webpack에 대해서 알아봅시다. 기본적인 내용보다는 회사에서 새로운 환경을 구성했던 경험을 바탕으로 작성해보겠습니다.

Webpack의 기본

webpack을 다루기 위해서는 기본적으로 webpack이 어떤 흐름으로 동작하는지 알아야 합니다. Webpack 5를 기준으로 심플하게 아래와 같은 흐름으로 동작합니다.

1. Mode - Bundle 작업 깊이를 결정
2. Entry - Bundle의 시작점 설정
3. Output - Bundle의 결과물 설정
4. module - 파일에 대한 Read 설정
5. plugins - 파일을 Bundle하기 전의 설정

너무 쉽게 적은 것처럼 보이지만 Bundler의 동작만을 본다면 위 설정만 가지고도 괜찮은 환경을 만들 수 있습니다.

다음 글부터 위의 동작들에 대한 나름대로의 정리와 결과물을 포스팅하도록 하겠습니다~!