자주 사용하는 플러그인 (webpack)

직접 플러그인을 만들어서 사용하는 경우는 거의 없을 것이고 웹팩에서 직접 제공하는 플러그인이나 이미 유명한 라이브러리를 사용하는데 자주 쓰는 플러그인에 대해 알아보자.

** BannerPlugin

결과물에 빌드 정보나 커밋 버전 같은 것을 추가 할 수가 있다. 웹팩에서 기본적으로 제공하는 플러그인으로 한 번 사용해보자

config 파일에서 웹팩에서 제공해주는 플러그인이기 때문에

const webpack = require('webpack');

이렇게 해주면 빌드된 결과물 상단에서 메세지를 볼 수가 있다.

한 번 더 예시로 빌드 된 데이트와 깃 사용자 이름을 한번 넣어보자

노드에서 모듈로 child-process 라는 것을 제공하는데 명령어를 그대로 가져와서 쓸 수 있게 해준다.

** DefinePlugin

웹팩에서 기본적으로 제공하는 모듈로서 어플리케이션을 운영 할 때 개발빌드 과정에서의 코드, 프로덕션 빌드 과정에서의 코드를 각각 사용하고 싶을 때 이 플러그인을 쓴다. 배포할 때마다 코드를 수정하게 되면 에러가 발생할 수도 있다.

DefinePlugin객체를 만들어주고

엔트리 파일에서 process.env.NODE_ENV 를 콘솔로 찍어보고 빌드하면

이 결과가 나오는데 위의 플러그인을 사용하게 되면 기본적으로 노드에서 제공해주는 환경변수다. 저 값은 webpack.config 파일의 mode 값이 할당 된다. 또 여기서 변수를 추가해줄 수 있는데

이런식으로 파일에서 변수명만 입력함으로써 접근할 수 있다.

**HtmlTemplatePlugin

이 플러그인은 써드 파티 패키지로서 노드 웹팩에서 직접 제공하는 것이 아니기 때문에 직접 설치해줘야 하고 HTML 파일을 후처리하는데 사용한다. 빌드 된 시간을 넣거나 코드를 압축할 수가 있다.

기존에는 src 폴더 밖에 html 파일 냅두고 src 폴더 안의 자바스크립트 코드들을 빌드해서 결과물을 냈다면 html 파일도 src 폴더 안에 넣어서 빌드 되는 과정에 넣어서 같이 관리해줄 수 있으므로 파일간의 의존성에 더 유연해질 수 있다.

변수도 직접 지정한 템플릿에 집어 넣을 수 있는데 한번 해보자

const HtmlWebpackPlugin = require('html-webpack-plugin');  // 설치한 플러그인 불러오깅

그리고 플러그인 배열에

정상적으로 들어간 것을 확인 할 수 있다. 또 추가적으로 주석제거와 빈공간 제거(코드 압축의 개념)도 가능한데 한번 실험 해보면

이렇게 빈칸이 없어지면서 한줄로 코드가 작성되고 자세히 보면 주석도 사라 진 것을 볼 수 있다.

** CleanWebpackPlugin

이 플러그인은 또한 따로 설치를 해주어야 하며 이전에 남아있는 dist 폴더의 결과물들 즉 dist 폴더를 통째로 날리고 새로 아웃풋된 결과물들을 저장해준다.

즉 기존의 썻다가 다시 필요없어진 파일들이나 잔재들을 없애주기 때문에 헷갈리지 않을 수 있다.

사용법은 간단하다.

const {CleanWebpackPlugin} = require('clean-webpack-plugin'); // 가져와주고

추가해주면 끝~

작성한 뒤에 아웃풋 폴더(dist) 에 겹치지 않는 이름의 파일 하나 만들어서 새로 빌드해보면 결과를 알 수 있을 것이다.

**MiniCssExtractPlugin

다량의 Css 코드가 있게 되면 하나의 자바스크립트 결과물로 만드는 것이 부담 될 수 있다. 브라우저에서 로딩할 때 부담이 되기도 하며 즉 별도의 CSS 파일을 하나 만들어서 최종적으로는 자바스크립트 파일 하나 CSS 파일 하나가 번들링 된 결과로 나오는 것이겠다.

Devil Front