webpack?

Webpack란?

Vue Webpack 설치이전에 webpack이 무엇인지 먼저 정리하려한다. webpack은 자바스크립트 정적 모듈 번들러(Static Module Bundler)로 자바스크립트 코드가 많아져 하나의 파일로 관리가 불가능한 부분을 보완하기 위해 만들어졌다.여러개의 자바스크립트코드를 모듈로 묶어 네트워크비를 절감하며 관리을 가능하도록 한다.

 

 

 

---

 

 

 Module? Bundler? 

 

 

1. Module이란?

프로그램을 구성하는 구성요소 중 일부로, 일반적으로 관련된 데이터와 함수들이 묶여서 모듈을 형성하고 파일 단위로 나눈다. 

 

2. Bindler란?

프로그래머가 지정한 단위로 파일을 하나로 만들어, 요청에 대한 응답으로 전달할 수 있는 환경을 만들어준다.

 

 

 

---

 

 webpack의 주요 개념 

 

Entry

: 웹팩의 모든것은 모듈로 이루어져 있고, 모든것을 자바스크립트 모듈로 로딩해서 사용한다. 그러나 자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성이 크게 증가한다. 의존성 그래프의 시작점을 엔트리라 한다. 웹팩의 시작점 경로는 항상 entry로 시작한다. 웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일로 묶으며, 엔트리는 여러개가 존재할 수 있다.

 

 

Output

: 위 엔트리에 설정한 자바스크립트 파일부터 의존되어 있는 모든 모듈을 하나로 묶는 작업을 한다. 번들된 결과물을 처리할 위치가 바로 output이다.

 

 

Loader

: 웹팩은 모든 파일을 모듈로 관리한다. 자바스크립트 , 제이슨파일 뿐만 아니라 이미지, 폰트, 스타일시트도 전부! 그러나 인식하는 문자는 자바스크립트와 제이슨뿐이기 때문에 웹팩은 자바스크립트가 아닌 파일은 이해하지 못한다. 그렇기 때문에 다른 타입의 파일들을 웹팩이 이해할 수 있는 언어로 변환해주는 Loader가 필요하다. css, babel 등 다양한 문서가 loader 작업이 필요하다.

 

 

Plugin

: 로더는 파일단위로 변환처리하지만, 플러그인은 번들된 결과물 단위로 변환처리를 한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.

 

 

 

 

 

 

참고문서 : velog.io/@hih0327/Webpack-%EA%B8%B0%EC%B4%88

Webpack 기초