webpack 이란

webpack이란, 모듈화한 여러 개의 파일을 모아 주는 번들러입니다. 번들러는 이 외에도 'Rollup'과 'Parcel'이 있습니다.

 

모듈화한 파일 결합은 단순하게 파일을 결합하는 것이 아니며, 모듈의 의존 상태를 해결하면서 번들합니다.

 

webpack은 '.js' 파일 뿐만 아니라. css와 이미지 같은 리소스를 번들해 주는 기능도 있습니다. 다양한 Loader를 사용하면, 단일 파일 컴포넌트 vue, Pug와 Sass 같은 다양한 형식의 파일도 읽어 들일 수 있습니다.

 

처음 읽어 들이는 파일(엔트리 포인트)을 시작으로 연결된 리소스를 모두 번들하므로, 애플리케이션에 불필요한 리소스는 알아서 제외된다는 장점도 있습니다.

 

코어 컨셉으로는 아래와 같습니다.

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

번들이란?

Bundle, 영어로 묶음이라는 뜻이며 보통 상품을 구매했을 때 끼워주는 걸 말합니다. 필요 파일들을 묶어준다는 의미입니다.

 

 

추상화는 왜 필요할까?

지금까지 설명했던 것처럼 '컴포넌트와 모듈 처럼 코드를 분리하는 것'을 추상화라고 부릅니다.
추상화의 단위는 굉장히 다양하지만, 일반적으로 '어떠한 이름을 붙일 수 있는 의존성이 적은 범용적인 코드'를 단위로 사용하는 것이 기본입니다.
이는 vue.js 컴포넌트를 사용할 때 발생하는 '유지보수성과 재사용성의 장점'과 같습니다.