웹팩 완전정복! https://kdydesign.github.io/2017/11/04/webpack-tutorial/
웹팩 써보신적 있나요 하는 질문에 대답하기
웹팩은 create-react-app이나 angular-cli에서 기본적으로 사용하기 때문에 사용해본 적은 있지만 직접 config file을 작성해본 적은 없습니다.
웹팩은 무엇인가 : build tool이며 Package Bundler이다.
build tool 중 많이 사용하는 tool
Gulp / Webpack
Gulp는 Task Runner / 웹팩은 Package Bundler (module bundler)
Package Bundler - 종속성을 가진 애플리케이션 모듈을 정적인 소스로 재생산
Task Runner - 반복 가능한 특정 작업을 자동화
Webpack은
애플리케이션을 처리할 때 필요한 모든 javascript 모듈들을 종속성 그래프로 반복적으로 작성한 다음 모든 모듈을 브라우저에서 로드 할 수 있는 하나 혹은 여러개의 Bundle로 패키지화하는 것을 뜻한다.
이 작업을 번들링이라고 한다.
웹팩의 특징
Loader를 통해 Javascript, Image file, Font, CSS 들을 하나의 모듈로 취급해줌
Entry 별로 Bundle 생성 가능
Bundle에 대한 압축 및 난독화, 소스 맵에 대한 옵션을 제공
Plug-In 사용을 통한 사용자 정의 기능 수행
비동기 I/O와 다중 캐시 레벨을 사용하기 때문에 컴파일 속도가 매우 빠름
CommonJS(nodejs)와 AMD(requires) 스펙 지원
번들링을 진행하는동안 config 파일을 설정해서 uglify나 minified등을 해줄 수 있고 cra를 사용할 경우 기본 설정이 맞춰진 상태로 나온다.
javascript가 ES6에 들어서면서 모듈 관련 스펙이 들어갔지만 모든 브라우저가 이를 지원하는 것은 아니기때문에 webpack의 도움이 필요하다. 또한 모듈로 나눠진 js파일들을 하나 또는 여러개의 작은 js 파일로 번들링 함으로써 네트워크 통신 비용도 줄어들게 된다.
리액트에서 웹팩을 뜯어야 하는 상황
크롬 익스텐션 추가나, 리치 에디터 등 기본 번들 설정을 건드려야 할때
