JavaScript - Webpack 이란

 

 

웹팩을 일하면서 정말 많이 들어보았다. 대충 개념만 알고 있는 거와 정리해보는 건 다르다.

도대체 웹팩의 정체는 뭘까? 블로그들을 참고하여 개념적인 부분만 먼저 정리해보았다.

 

---

JavaScript - Webpack 이란 

직관적으로 그림을 먼저 살펴보자.

많은 네모들이 보이다 → 네모의 수가 줄어들었다. 복잡한 것들 깔끔하게 정리가 된 느낌이다.

 

웹팩이 뭘까?

웹팩은 모듈 번들러 라이브러리이다. 

 

그럼 모듈 번들러는 뭘까? 

여러개의 나누어진 있는 파일들을 하나의 파일로 만들어주는 라이브러리이다.

 

왜 사용할까?

하나의 웹페이지가 로드될 때 여러개의 자바스크립트 파일들을 가져와 퍼즐조각처럼 맞추며 우리앞에 짜잔하고 나타난다.(렌더링)

그래서 전역적으로 한꺼번에 많은 파일을 불러오면 뻑(?)이 날 가능성이 농후하다.

(전역변수 price 같은 이름이 여러파일에서 겹친다면? 🥶) 

 

그래서 모듈 번들러 라는 아이가 등장하였다. 

얘를 쓰면 파일들의 관계(의존성)를 자동으로 파악하고 혹시라도 뭐가 안맞아서 뻑나지 않도록 그룹핑까지 해준다. 

바로 웹팩이 모듈 번들러 라이브러리의 종류 중 하나이다. 

 

장점

1. 속도가 빠르다

웹팩은 하나의 파일로 로드하기 때문에 로딩속도가 빠르다.

 

2. 관리가 쉽다.

웹팩은 Module 을 사용하여 매우 복잡하고 긴 코드를 작성할 때 사용 용도에 따라 파일 단위로 구분한 뒤, 

다른 파일에서 해당 클래스나 함수가 필요할 때 가져와서 사용할 수 있도록 해준다. 외부 라이브러리의 의존성도 쉽게 관리할 수 있다.

 

 

구조 

• path : 파일의 경로를 다루고 변경하는 유틸리티
• output : build 결과를 저장할 경로
• entry : build의 대상이 될 파일
• Plug-In : build 된 bundle 파일을 동적으로 특정 html 페이지에 추가 할 수 있으며 build 시에 javaScript, css, html 등의 파일을 난독화 및 압축을 진행할 수 있다.

 

 

예전에 옆에서 사수분이 웹팩설정을 하는 걸 지켜본적이 있었다.

여러개의 파일을 하나로 합치는 게 핵심이고, 합치면서 편해지는 부분들이 큰 장점이라고 느꼇다.

블로그나 공식문서를 참고하며 아직 낯설지만 언젠가는 정복하고 싶은 산이라 차근차근 공부해나가야겠다고 생각했다.

다음번에는 웹팩 config 부분들을 공부하며 포스팅해봐야겠다.

 

 

 

ref blogs: 

https://joshua1988.github.io/webpack-guide/motivation/problem-to-solve.html#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EB%B3%84-http-%EC%9A%94%EC%B2%AD-%EC%88%AB%EC%9E%90%EC%9D%98-%EC%A0%9C%EC%95%BD

 

https://haviyj.tistory.com/17

 

https://velog.io/@yon3115/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%95%84%EC%88%98-Webpack%EC%9D%B4%EB%9E%80

 

https://velog.io/@mnz/Webpack-%EC%9B%B9%ED%8C%A9-%EA%B0%9C%EB%85%90-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0#1-4-bundler%EC%9D%98-%EC%9E%A5%EC%A0%90-