Webpack 이란?

# Webpack 이란?

- 팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리입니다.

## 웹팩 장점은 무엇인가요?

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있습니다.
2. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽습니다.

 

많은 자바스크립트 파일과 module과 sass 파일이든지 이미지 에셋들을 배포를 위한 정적인 에섯들로 만들어 줍니다.

## Webpack 설정

Entry 
의존성 그래프의 시작점을 웹팩에서는 엔트리(Entry)라고 한다. 
웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일로 묶는다. 
여러 개의 엔트리가 존재할 수 있다. 

Output 
엔트리에 설정한 자바스크립트 파일을 시작으로 하나로 묶는다. 그 후 번들된 결과물을 처리할 위치를 output에 기록한다. 

Loader 
웹팩은 오직 JavaScript와 Json만 이해할 수 있다. 
로더는 다른 Type의 파일(img, font, stylesheet 등)을 웹팩이 이해하고 처리 가능한 모듈로 변환시키는 작업을 한다. 

Plugin 
로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다. 
로더가 변환하는 동안 플러그인은 bundle optimization, asset management and injection of environment과 같은 일을 진행할 수 있다.

 

Module 
프로그램을 구성하는 구성 요소의 일부.
관련된 데이터와 함수들이 묶여서 모듈을 형성하고 파일 단위로 나뉘는 것이 일반적이다. 
모듈화 프로그래밍은 기능별로 파일을 나눠가며 프로그래밍을 하는 것으로 유지보수가 쉽다는 장점이 있다.