웹팩이 필요한 이유
웹팩이 필요한 이유, 즉 해당 기술이 해결하고자 하는 본질에 대해 알아보자.
배경
먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것 같다.
아래 덧셈 함수를 보자.
- math.js
1
2
3
function sum(a, b) {
return a + b
} // 전역 공간에 sum이 노출
- app.js
1
sum(1, 2) // 3
위 코드는 모두 하나의 HTML 파일 안에서 로딩해야만 실행된다. math.js가 로딩되면 app.js는 이름 공간에서 ‘sum’을 찾은 뒤 이 함수를 실행한다. 문제는 ‘sum’이 전역 공간(전역 scope)에 노출된다는 것이다. 즉, 다른 파일에서도 ‘sum’이란 이름을 사용한다면 충돌하게 될 것이고, 기본 math.js 에 작성한 함수가 본연의 기능을 잃게 될 것이다.