Webpack

Webpack?

 - 모던 자바 스크립트 어플리케이션을 위한 정적 모듈 번들러

 

 

Module?

 - 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태

 

Bundler?

 - 서로 참조 관계에 있는 모듈들을 모아서 하나의 파일로 만드는 것

 

Webpack이 바라보는 모듈

 - .js, sass, hbs, jpg, png 등등

Webpack 홈페이지의 이미지

Webpakc의 기본구조

#1. Entry

 - 모듈의 의존관계를 이해하기 위한 시작점을 설정

 - Webpack은 모듈들의 참조 관계를 해석해서 의존성 그래프를 만들며,
    이 의존성 그래프를 만들기 위해 어떤 모듈을 시작점으로 해석할지 결정하는 요소

 

#2. Output

 - Webpack이 생성하는 번들 파일에 대한 정보를 설정

 - 의존성 그래프를 만들고 번들 과정을 거치면
    Output 요소에 설정된 정보를 기반으로 번들된 파일 생성

 

#3. Mode

 - 웹팩이 mode에 따라 내장된 최적화를 사용

 - 빌드 환경 구분(dev와 product, none으로 구분. default는 product)

 

#4. Loader

 - 다양한 모듈들을 입력받아 처리하는 역할

 - 모듈을 해석할 때, 기본 모듈인  javscript와 json 외에도 다른 파일을 읽고 해석하려면
    loader를 추가 및 설정해야 파일 읽기 및 번들링 가능
 - test로 파일 인식 패턴 지정

 - use로 사용 로더 및 옵션 설정

 

#5. Plugin

 - 번들링의 전체적인 과정에 여러가지 일이 가능

 

 

 

* Fast campus의 Webpack 교육 내용 정리 중입니다.

참고 및 추가 자료

https://webpack.js.org/concepts/

https://opentutorials.org/module/4566