Webpack

Webpack이란

• Webpack은 모던 자바스크립트 애플리케이션을 위한 정적 모듈 번들러이다.
• 내부적으로 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 의존성 그래프를 만든다.
• Webpack은 다음과 같은 모듈들을 모두 하나로 모아 자바스크립트 코드에 import할 수 있게 해준다.
  • ES modules : import statement
  • Common JS modules : require() statement
  • AMD modules : define and require statement
  • CSS imports : @import statement inside any css/sass/less files
  • Image URLs : url(...) or <img src="..." />

핵심 개념

Entry

• 엔트리 포인트는 webpack이 내부의 의존성 그래프를 생성하기 위해 사용해야 하는 모듈이며, 모든 의존성이 하나로 모이는 지점이다.
• 기본값은 ./src/index.js이다.

Output

• Output(출력)은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 정의한다.
• 기본 출력 파일의 경우에는 ./dist/main.js로 , 생성된 기타 파일의 경우에는 ./dist 폴더로 설정된다.

Loaders

• webpack은 기본적으로 JavaScript와 JSON 파일만 이해한다.
• 로더는 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환 하여 애플리케이션에서 사용하거나 유효성 그래프에 추가하는 일을 가능하게 하는 서드파티 확장 프로그램이다.

Plugins

• 플러그인은 번들을 최적화하거나, 애셋 관리, 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있게 해주는 서드파티 확장 프로그램이다.

Mode

• development, production 또는 none으로 설정 가능함으로써, webpack에 내장된 환경별 최적화를 활성화 할 수 있도록 한다.
• 기본값은 production이다.

Browser Compatibility

• Webpack은 ES5가 호환되는 모든 브라우저를 지원한다.

요약

• Webpack은 모던 자바스크립트 애플리케이션을 위한 정적 모듈 번들러로서 모듈을 매핑해 의존성 그래프를 생성한다.

참고 자료

• webpack Concepts
• Learn webpack in Under 10 Minutes