Webpack

코드의 양이 늘어 나면서 코드의 수월한 유지보수를 위해 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요해 진다. JavaScript는 이러한 모듈 시스템이 없어서 다양한 도구를 사용하는데 webpack도 그 중 하나이다.

모듈 번들러

Webpack은 모듈 번들러 이다.

그럼 왜 모듈 번들러를 사용할까?
모듈 번들러가 없이 배포되면 웹 페이지를 보여주기 위해
수많은 정적 파일들을 서버에 여러번 요청한다.

페이지 하나를 보여주기 위해 서버와 여러번 통신한다면 상당히 비효율적이므로 Webpack과 같은 모듈 번들러를 사용 하게 된다.

이처럼 여러개의 자바스크립트 파일을 하나의 파일로 묶어서 한 번의 요청을 통해 가지고 올 수 있게 하고 자바스크립트 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있다.

Module

프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태.
모듈화 프로그래밍은 기능별로 파일을 나눠가며 프로그래밍을 하는 것으로 유지보수가 쉽다는 장점이 있다.

Bundler

번들러는 지정한 단위로 파일들을 하나로 만들어서 요청에 대한 응답으로 전달할 수 있는 환경을 만들어주는 역할을 한다.
번들러를 사용하면 소스 코드를 모듈별로 작성할 수 있고 모듈간 또는 외부 라이브러리의 의존성도 쉽게 관리할 수 있다.

Webpack

• 엔트리
  js, css, img 파일 등 모든 것을 자바스크립트 모듈로 로딩해서 사용 한다.
  의존성 그래프를 만들기 위해 필요한 Input Source로 여러개의 entry가 존재할 수 있다.

• 아웃풋
  entry에 설정한 자바스크립트 파일에 의존되어 있는 모든 모듈을 하나로 모으고 생성된 번들을 내보낼 위치와 파일의 이름을 지정한다.

module.exports = {
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
}

• 로더
  Webpack은 오직 Javascript와 Json만 이해할 수 있는데
  로더는 다른 Type의 파일을 Webpack이 처리가능한 모듈로 변환시키는 작업을 담당한다.

• 플러그인
  번들된 결과물을 처리하며 번들된 자바스크립트를 최적화 할 수 있고 공통된 코드를 분리할 수 있으며 코드의 변경사항을 파악하여 자동으로 재실행시킬 수 있다.