웹팩(Webpack) - 플러그인

 

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의

로더가 파일 단위로 처리한다면

플러그인은 번들된 결과물을 처리한다.

 

번들된 자바스크립트를 난독화 or 특정 텍스트를 추출하는 용도로 사용한다.

실제로 플러그인을 만드는 일은 거의없고 필요한 것은 대부분 만들어져 있다.

 

자주 사용하는 플러그인

BannerPlugin

결과물에 빌드 정보나 커밋 버전같은 걸 추가할 수 있다.

웹팩이 기본으로 제공하는 플러그인

 

DefinePlugin

어플리케이션은 개발환경과 운영환경으로 나눠서 운영한다. 가령 환경에 따라 API 서버 주소가 다를 수 있다.

배포할때마다 코드를 수정하면 장애나 휴먼 에러가 나타날 수 있다.

환경 의존 정보들을 소스가 아닌 곳에서 관리하는 곳이 좋다.

이러한 환경 변수들을 어플리케이션에 제공하기위해 DefinePlugin을 사용한다.

웹팩 기본 플러그인

 

HtmlTemplatePlugin

HTML 파일을 처리하는데 사용

build과정에서 html파일을 포함하고 의존적이지 않은 코드로 html파일을 만들 수 있다.

 

CleanWebpackPlugin

아웃풋 폴더를 삭제해주는 플러그인,

빌드할때마다 폴더를 삭제해주고 새로 만들어주는 플러그인

 

MiniCssExtractPlugin

스타일시트가 많아지면 하나의 자바스크립트 결과물로 만드는 것이 부담일 수 있다.

번들 결과에서 스타일 시트 코드만 뽑아서 별도의 CSS파일로 만들어 역할에 따라 파일로 분리하는 것이 좋다.

브라우저에서 큰 파일을 받는 것보다 자바스크립트 파일 하나, CSS 파일 하나 받는 것이 페이지 로딩의 성능이 더 좋다..