본문 바로가기

Web Programming

Webpack 에 대한 이해를 해보자 ①

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 예전에 AngularJS 를 학습하면서 (프로젝트를 하면서) grunt나 gulp를 사용하여서 프론트엔드 소스코드를 '빌드' 하고는 했다. 그렇게 빌드하고 나온 소스들은 javascript 소스나 css 파일들이 한대로 묶이고, 뭔가 보기 힘든 형태의 소스코드로 바뀌어있었다. 또한 이미지 파일들도 자동으로 파일 이름이 변경되면서 브라우저 캐싱에 대응하여 변경이 되었다. 환경(개발/라이브)에 따라서 정해놓은 값들을 바꾸어주는 역할도 했다. 심지어 이걸 내가 세팅하고 만들었는데 3~4년 지난 지금 전혀 기억이 나질 않는다. 역시 눈에서 멀어지면 마음에서도 멀어지나보다.

아 대략 이렇게 나오는 구나~

 그냥 빌드, 실행을 통해서 나오는 화면을 보고는 이렇게 말할 수 있었다. '그때 그것처럼 되겠구나' 했지만 그 과정이 전혀 기억이 나질 않는다. 이번에 VueJS 학습을 하면서 만난 webpack 도 이름만 달랐지 해주는 역할은 비슷할텐데, 그 과정이 이해가 잘 안간다. 게다가 또 다른 개념들의 모듈들이 생기면서 더 이해해야 할 것들이 생겼다.

  • webpack 은 왜 쓰나? 이미 다른 빌드 도구들도 있는데 왜 하필 webpack 인가?
  • Babel 은 뭔가?
  • 환경에 따라 다른 빌드 환경 설정은 어떻게 해야하나?
  • 프론트엔드는 어떻게 테스트 하나?

 시작은 vue init 이었는데 정작 vue 보다 webpack의 빌드 과정을 이해하는게 더 먼저가 되어버렸다.

 

webpack 은 무엇인가?

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

 저 중에 눈에 띄는 단어가 module bundler, dependency 정도인데, Javascript 어플리케이션의 종속 관계를 고려한 모듈을 묶어 주는 친구 정도가 되나보다. 앞서 공부했던 빌드 도구(grunt, gulp)들과 유사하지만 뭐가 크게 다른지 이 정도만 보고는 잘 모르겠다. 그럼 왜 webpack 이어야 할까? 여러 글들을 살펴보면 각자의 이유가 있지만 일단 괄목할 만한 것은 '성능이 뛰어나다', '플러그인에 대한 종속성이 낮다' 라던데 잘 와닿지 않는다. 이건 좀 더 경험을 해보자.

Babel은 뭐하는 건가?

 Babel은 Javascript compiler 라고 표현을 하고 있다. 그래 그렇다, 이제 Javascript는 컴파일러가 필요한 녀석이다. (정도로 인지하는게 좋겠다) 살펴보면 이 친구 덕분에 Javascript를 모듈화 할수 있는 것으로 추정이 된다. 브라우저가 지원하는 자바 스크립트의 버전에 맞도록 스크립트를 변환해주는 역할을 한다고 한다.

 webpack 과 babel 두 가지에 대한 개념과 역할에 대해서 대략 알아봤다. 실제로는 webpack에서 이를 통해서 '번들링' 하게되는데 실제로는 어떻게 해야하는지는 직접 써보지 않고서는 이야기 하기 어렵다. 직접 프로젝트를 만들어서 나머지 두가지 궁금증을 해소해봐야겠다.