210901 개발기록: webpack을 알아보자

🌀  Webpack 의 등장배경

과거에는 index.html 에 스크립트 파일을 올려 사용했다.

만약 3개의 js 파일을 사용한다면 index.html 에 일일이 3개의 js파일을 <script ...> </script> 이런 식으로 등록해야 했다.

번거로움도 문제지만, 이런식으로 파일을 등록하면 전역 스코프가 오염된다는 큰 문제가 있다.

어느 모듈(js 파일)에서 정의한 sum() 함수는 곧바로 전역 함수로 등록되어 다른 곳에서도 사용될 수 있지만,

만약 다른 모듈에서 동일한 이름의 함수가 또 정의되면 걷잡을 수 없는 에러의 늪에 빠지게 된다. 예측을 할 수 없게 된다.

 

그리하여 모듈 시스템이란 개념이 두두등장한다. import 키워드로 필요한 모듈만 가져올 수 있어 이전 처럼 예측 불가능한 에러를 막는데 일조할 수 있었다. 하지만 모듈 시스템의 또 다른 문제점은 브라우저 호환성이었다. IE 에서는 이를 지원하지 않았기에, 이를 해결할 다른 방법이 또 필요하게 됐다.

 

개발자는 브라우저와 무관하게 모듈을 사용하고자 했고 이를 해결하기 위해 webpack 이란 개념이 등장한다.

(어떤 원리로 브라우저 호환성 문제를 해결했는지는 조사가 필요하다.)

 

✏️  웹팩이란

웹팩은 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundler)다. 위에서 언급했든 3개의 서로 다른 모듈을 하나로 합쳐주는 도구라 볼 수 있다. 서로 다른 여러개의 모듈이 딱 하나의 모듈에 의존성을 가져 해당 모듈 내부에서 모두 import 된다면, 그 모듈이 전체 모듈의 시작점(entry point) 이 된다. 일반적으로 app.js 가 이에 해당된다.

 

📚  Webpack 의 3요소 [ mode, entry, output ]

webpack을 설정할 때 기본적으로 webpack.config.js 파일에 필수요소 3가지를 세팅한다. 

module 뭉치(bundler) 가 어떤 모드(mode) 로 빌드될 것인지, 시작점(entry) 이 어디인지, 결과물(output)은 어느 경로에 저장될 것인지를 설정하는 파일이다.

 

✅  정리하면,

자바스크립트 모듈이 여러 의존관계를 가지는데, 엔트리는 의존관계 모듈의 시작점을 뜻한다.

웹팩은 시작점을 기준으로 모든 모듈을 찾아 하나의 번들링 파일을 만든는데 이를 아웃풋이라 한다.