Plugin (webpack)

웹팩에서 알아야 할 마지막 개념이라고도 할 수 있는 플러그인에 대해 알아보겠다. 

 

로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다고 하는데 코드를 난독화 하거나 특정 텍스트를 추출하는데 쓰인다고 하니 직접 한번 코드를 짜가면서 동작 원리를 익혀보자.

 

로더는 함수로서 동작한다면 플러그인은 클래스로서 동작한다고 보면 되겠다.

 

우선 플러그인 클래스 파일을 하나 만들어주고 exports 해주자.

 

 

 

그리고 webpack.config 파일로 가서 상단에 임포트 해준뒤에 

 

 

 

 

new 키워드를 통해 객체를 생성해주고 빌드를 해보면 

 

 

 

콘솔에 제대로 찍히는 것을 확인 할 수 있다. 

 

그전에 로더로 콘솔에 찍어보았을 때는 각 확장자 옵션에 해당하는 모든 파일들을 돌면서 번들링을 해주면서 콘솔에 찍어보았을 때는 파일의 개수만큼 찍혔지만 지금은 그렇게 번들된 결과물에 한해서 한번만 실행되는 것을 볼 수가 있다. 

 

** 로더가 각 파일들을 돌면서 번들링 작업을 한다면 그 결과물을 가지고 후처리 느낌의 작업을 해주는 것이 바로 플러그인의 역할 이라고 보면 되겠다 **