웹팩이 필요한 이유와 기본 동작 - 웹팩(Webpack) 기본편 | 김정환

[출처 : https://www.inflearn.com]

1. 배경

문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터이다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는 데 수월하다.

 

math.js :

function sum(a, b){
  return a+b
}

app.js :

console.log(sum(1,2));

index.html : 

<script src="/math.js"></script>
<script src="/app.js"></script>

=> index.html을 실행하면 console 창에 3이 찍힌다.

 

위와 같이 하면 전역 스코프가 오염되는 문제가 있다. math.js의 sum 함수는 어플리케이션이 돌아가는 어느 곳에서나 sum 함수에 접근할 수 있게 된다.

예를 들어 자바스크립트는 함수에도 할당할 수 있기에 전역 스코프가 오염되면 어플리케이션은 예측할 수 없게 되고 결국 런타임 에러가 발생한다.

 

1-1. IIFE 방식의 모듈

# IIFE(즉시 실행 함수 표현)은 정의되자마자 즉시 실행되는 자바스크립트 함수를 말한다.

(function(){
  ...
})();

정의하자마자 실행하게 되면 함수 안에 독립적인 스코프가 생성되고, 그 안에서 정의했던 이름들은 함수 외부에서 접근할 수 없기에 전역 스코프가 오염되는 문제를 예방하게 된다.

 

math.js :

var math = math || {};

(function(){
  function sum(a, b){
    return a + b;
  }
  math.sum = sum;
})();

app.js : 

console.log(math.sum(1,2));

1-2. 다양한 모듈 스펙

# CommonJS는 자바스크립트를 사용하는 모든 환경에서 모듈을 하는 것이 목표다. exports 키워드로 모듈을 만들고 require() 함수로 불러 들이는 방식이다. 대표적으로 서버 사이드 플래폼인 Nodejs에서 이를 사용한다.

 

math.js :

exports function sum(a, b) { return a+b;}

app.js : 

const sum = require('./math.js');
sum(1, 2);  // 3

# AMD(Asynchronous Module Definition)는 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표다. 주로 브라우져 환경이다.

 

# UMD(Universal Module Definition)는 AMD 기반으로 CommonJS 방식까지 지원하는 통합 형태다.

 

# 바벨이나 웹팩을 이용해서 ES2015 모듈 시스템을 사용하는 것이 일반적이다.

 

math.js :

exports function sum(a, b) { return a+b;}

app.js : 

import * as math from './math.js';  // 방식 1. 모든 exports를 math라는 객체로 가져온다.
import {sum} from './math.js';  // 방식 1. sum 함수만 math라는 객체로 가져온다.

math.sum(1, 2);  // 3

 

# app.js 는 math.js를 가져오기 때문에 의존관계가 있다.

 

1-3. 브라우져의 모듈 지원

IE를 포함한 몇 몇 브라우져에서는 여전히 모듈을 사용하지 못한다.

크롬(버전 61부터 모듈 시스템을 지원한다.) 브라우져에서 모듈 사용은 다음과 같다.

 

index.html :

<script type="module" src="/app.js"></script>  // app.js가 모듈 시스템을 사용한다

브라우져에 무관하게 모듈을 사용하고 싶을 때, 웹팩이 필요하다.