Home

오늘의 기억

[Webpack] 사내 webpack 도입기 (2) - webpack 이란?


이번 장에서는 webpack이 무엇인지, 내가 앞서 언급했던 문제들을 해결하기 위해 왜 webpack을 선택했는지에 대해 설명한다.


webpack

webpack 이란 무엇일까, webpack 공식 홈페이지의 Concepts 페이지에 다음과 같이 소개하고있다.

webpack의 핵심은 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다.
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.

이것만 봐서는 정확히 무슨 얘긴지 모를 수 있다.

그러나 쉽게 말하면 webpack은 애플리케이션에 필요한 모든 모듈을 알아서 매핑하며, 매핑 된 결과를 가지고 하나 이상의 번들을 생성한다는 것이다.

하나하나 차근차근 각각의 개념에 대해서 알아보자.


모듈 (Module)

먼저 모듈에 대해 사전적 의미를 보면 다음과 같다.

프로그램을 기능별로 분할한 논리적인 일부분

webpack에서 말하는 모듈도 마찬가지이다. JavaScript 애플리케이션을 구성하는 기능들을 분할한 단위라고 생각하면 된다.

그렇다면 JavaScript 애플리케이션에서 모듈은 어떻게 구현할까?

ES6 (ECMAScript 6) 이전에는 다양한 방법으로 모듈을 선언해서 사용했었다. 몇 가지 예를 들자면 즉시 실행 함수로 하나의 모듈을 묶는 방법, 함수의 클로저를 이용하여 모듈을 선언하는 방법, 함수를 인스턴스화 하여 객체처럼 사용하는 방법, 기타 라이브러리를 이용하는 방법, 등등… 이렇게 다양한 방식으로 각각 상황에 따라 아니면 개발자의 입맛에 따라 모듈을 선언하고 사용했다.

하지만 ES6 에서 부터는 이런 모듈을 선언하고 사용하는 방식을 정식 문법으로 채택하여 공개했다. 간단하게 맛보기로 문법을 보면 다음과 같다.

// greeting.js - 모듈 선언
export function sayHello() {
  console.log('Hello');
};
// main.js - 모듈 사용
import { sayHello } from './greeting.js';
sayHello(); // Hello

번들러 (Bundler)

먼저 번들(Bundle)에 대한 의미는 ‘꾸러미, 묶음’ 이라는 뜻이다.

마찬가지로 webpack에서 본인들이 말하는 번들러란 의미는 분리되어있는 JavaScript 소스코드를 하나의 소스 코드로 묶어준다는 역할을 의미한다.

여기서 출력 된 하나의 소스 코드를 ‘번들’, ‘번들 파일’ 이라고도 부른다.


webpack

다시 webpack 으로 돌아와서, webpack은 JavaScript 애플리케이션에 필요한 모듈을 알아서 찾아 하나 이상의 번들 파일을 생성해주는 번들러이다.

webpack은 수 많은 모듈 사용 방식 중 ES6에 채택 된 표준 모듈 문법을 지원하며, 사용자에게 ES6의 모듈 문법을 그대로 제약없이 사용할 수 있게 해주는 역할을 한다.

webpack

쉽게 말해 webpack을 이용하여 어플리케이션을 개발할 때는 ES6의 모듈 문법을 이용해 개발하며, 완성 된 소스 코드를 가져다 사용할 때는 생성 된 번들 파일만 Import 하면 된다.


문제점 해결

앞서 언급했던 문제점은 크게 세 가지로 구분되었다.

  • JavaScript 소스 코드 Import
  • JavaScript 소스 코드의 충돌
  • JavaScript 소스 코드가 하나만 있어도 문제, 너무 많아도 문제

이러한 문제점들을 webpack을 이용해 ES6의 모듈 문법을 사용하여 개발하니 모두 해결되었다.

먼저 실제 개발할때는 각각 기능들에 맞게 모듈을 만들어 개발하니 유지보수도 쉬워졌으며, JSP나 HTML에서 Import 할때는 생성 된 번들 파일 하나만 Import 하면 된다. 따라서 Request 요청도 딱 한번만 발생되며, JS 파일간의 충돌이나 종속성도 신경 쓸 필요가 없게 되었다.


추가 기능

webpack에는 모듈 및 번들링 기능만 있는건 아니다. 다양한 loader 및 plugin 을 추가 설치하면 그에 맞는 기능들을 사용할 수 있다.

예를들면 브라우저에서 지원하지 않는 최신 JavaScript 문법을 사용한다거나, 번들 파일로 컴파일하는 단계에서 불필요한 변수 및 올바르지 않는 문법을 체크를 하거나 기타 등등.. 오픈 소스로 공개 된 많은 패키지를 이용하면 무궁무진한 webpack 개발 환경을 구축할 수가 있다.


같이 보기

20180705 Charyum.Park