모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.

<aside> 💡

추후에 lazy-loading이나 code-splitting을 이용하면, 이 하나의 결과물을 찢을수는 있다.

</aside>

웹팩에서의 모듈

웹 애플리케이션을 제작하기 위한 모든 리소스 (html,css,js,Images,fonts) 하나하나를 모듈로 본다.

옛날 웹 개발 환경

• index.html에서 각각 app.js, main.js를 가져온다.
• app.js 파일에 var num
• main 파일에도 var num 이 들어가있다.

• 변수가 파일 범위 스코프가 아니기때문에 결국에 마지막에 가져온 main.js의 변수가 오버라이딩 된다.

<aside> 💡 이를 해결하기 위해서 자바스크립트에 모듈 이라는 개념이 추가되었고, import, export구문으로 이를 해결하려고 하였따.

</aside>