김민태의 프론트엔드 아카데미 강의를 듣고 관련 내용 정리하는 글.
Webpack
Webpack에서 웹 애플리케이션을 구성하는 HTML, CSS, Javascript, Images, Font 등 파일 하나하나가 모두 모듈이다.
Webpack은 위의 사진과 같이 모듈을 하나로 묶어서 번들링이라는 과정을 거쳐 하나 혹은 여러개로 나눠진 자바스크립트 파일로 결과를 만들어낸다.
모듈 번들링: 웹 애플리케이션을 구성하는 몇십, 몇백 개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 한다.
Core Concepts
Entry : 어떤 파일을 입력 파일로 시작할 것인지에 대한 정보
Output : 어떻게 output 파일을 만들것인지에 대한 정보
Loaders : 모든 번들링 작업을 웹팩이 하지는 않는다.
작은 프로그램을 웹팩 안에 주입할 수 있는 형태가 Loaders이다.
css, 이미지 최적화 모두 Loaders라는 구조로 되어있다.
ex. babel
Plugins : 처리된 파일을 어떻게 최종 출력 결과로 만들것인지에 대한 정보
- Loaders는 Entry에 적용되는 소프트웨어
- Plugins는 Output에 적용되는 소프트웨어
Webpack boilerplate를 검색하면 다양한 설정 찾을 수 있음
Babel
대표적인 트랜스파일러이자 Webpack에서 가장 많이 쓰이는 Loader
-
트랜스파일링 : 특정 언어로 작성된 코드를 비슷한 다르언어로 변환시키는 것
-
bablejs.io의Try it out에서 변환 결과 확인 가능
참조
https://medium.com/@woody_dev/js-webpack-1-웹팩이란-무엇인가-f29ebca31da4
jjlabsio