웹팩(Webpack)의 역할과 프론트엔드 개발에 웹팩이 필요한 이유

실무에서 Vue를 이용해서 개발하다 보니 프로젝트 생성 시부터 웹팩이 이미 포함되어 있었고, 기초를 모르니 원하는 설정을 인터넷에서 찾아 짜깁기하는 수준에 그치게 되었다. 그래서 추후 연관된 문제해결을 위해 웹팩 기초를 처음부터 공부하고자 한다.

 

웹팩이란

여러 개 파일을 하나의 파일로 합쳐주는 모듈 번들러.

 

- 모듈 번들러란 html, css, js, json, svg, ... 등의 자원을 모두 각각의 모듈로 보고, 이를 조합해서 하나의 결과물로 번들링하는(빌드하는) 도구임. 모듈 번들러가 필요하게 된 이유는 최근 복잡한 웹 애플리케이션의 등장과 관련이 있음.

- 거대한 자바스크립트 소스코드와 대규모 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 늘어나게 됨. 이 모듈 단위의 파일들을 호출하여 브라우저에 띄워야 하는데, 자바스크립트의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때 생겨나는 네트워크 쪽의 코스트도 신경써 줘야 함.

- 모듈 번들러는 이러한 복잡성에 대응하기 위해 하나의 시작점(App.js 등 entry point)로부터 의존성을 가지는 모듈을 전부 추적하여 하나의 결과물을 만들어내는 역할을 함.

 

번들링(bundling)이란

어떤 것을 묶는다는 사전적 의미를 가지고 있고, 프로그래밍에서는 모듈화했던 자바스크립트 파일을 묶어준다는 뜻으로 사용됨.

 

- 대표적으로 현재 프론트엔드 개발에 가장 많이 사용되고 있는 것이 웹팩(Webpack)임. 

- 웹팩에서 지칭하는 모듈은 자바스크립트 모듈에만 국한하지 않고 html, css, 이미지 파일 등도 포함한 개념임

- 따라서 웹팩은 주요 구성 요소인 로더(loader)를 통해, 다양한 타입의 파일들도 번들링이 가능함.

- 빌드, 번들링, 변환 이 세 단어 모두 같은 의미

 

 

웹팩이 필요한 이유

 

1. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해

- 일반적으로 한 웹페이지에 접근한 사용자는 5초 이내에 콘텐츠가 표시되지 않으면 이탈하거나 집중력을 잃게 된다고 함. 그래서 로딩 속도를 개선하기 위한 많은 노력들이 있었는데 대표적인 것이 브라우저에서 서버로 요청하는 파일의 숫자를 줄이는 것임

- 웹팩이 없으면 각 자원들마다 서버에 요청을 하여 자원을 얻어와야 했던 반면, 번들링하면 같은 타입(html, css, js)의 파일을 묶어서 요청/응답을 받기 때문에 비용이 줄어듦

- 웹팩은 기본적으로 필요한 자원을 미리 로딩하는 것이 아니라 그 때 그 때 요청한다는 철학을 가지고 있음

 

2. 자바스크립트 모듈화로 인한 이슈 해결

<script src="/js/vendor/vendor01.js"></script>
<script src="/js/module01.js"></script>
<script src="/js/lib/library01.js"></script>
<script src="/js/module02.js"></script>
<script src="/js/module03.js"></script>

- 일반적인 방식으로 자바스크립트를 모듈화해서 각각 불러오면, 자바스크립트의 특성에 따라 변수가 같은 스코프를 공유하게 되어 전역변수끼리 충돌이 발생할 수 있음. 자바스크립트 라이브러리 로딩 순서에 따른 이슈도 발생할 수 있고, 복잡도에 따른 관리 문제 또한 생길 수 있음

- 웹팩을 사용하면 수많은 모듈 중, 당장 의존성이 있는 클래스나 함수를 적시에 가져와서 사용할 수 있게 할 뿐더러, 외부 라이브러리의 의존성을 쉽게 관리할 수 있음

 

3. 그 외

- production 모드로 번들링 진행하는 경우, 코드 난독화, 압축, 최적화(tree shaking) 작업을 지원함. 상용환경의 프로그램을 사용자 입장에서 쾌적한 환경으로 만들어주면서 보안까지 신경쓸 수 있게 됨

- 웹팩 loader를 사용하면 일부 브라우저에서 지원되지 않는 자바스크립트의 ES6의 문법을 ES5로 변환해 주는 babel-loader를 사용할 수 있음. 이 외에도 vue 파일을 변환해 주는 vue-loader, scss 파일을 css 파일로 변환해 주는 sass-loader 등이 있어 본인이 원하는 최신 방식을 채택해 개발을 진행할 수 있도록 함

 

*Vue에서는 이미 cli에 웹팩이 포함되어 있기 때문에, 웹팩 설정을 변경하고 싶으면 vue.config.js 파일을 만들고 설정을 수정하면 된다.