Plugin이란? 🧐

정의 📋

웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성

역할 💪

• Webpack이 동작하는 전체적인 과정에 개입 가능, 번들링의 전체적인 과정에 여러가지 일들을 할 수 있음
• bundle 파일의 변화를 줌
• 개발 모드에서 개발 편의성을 제공
• production 모드에서 코드의 최적화를 제공

종류 🔩

• 웹팩 패키지 내부에 있는 플러그인
• 외부 저장소에서 관리되는 플러그인

문법 🔏

• plugins라는 key로 loader처럼 배열값을 기본으로 설정
• new 키워드를 통해 생성한 플러그인 객체를 배열안에 할당하여 사용

Webpack Plugin 🛠

Html Plugin ⚙️

특징

• 외부 저장소에 있는 플러그인

역할

• 번들러를 위한 html 파일을 자동으로 만들어주고 설정

속성

• template
  • 역할
    • 자동으로 생성되는 html 문서가 특정 파일을 기준으로 만들어지게 파일을 지정
  • 동작
    • template key에 지정된 파일을 이용해서 html 문서가 자동으로 생성이 됨
    • output에 대한 정보들을 이용해서 번들된 리소스를 불러올 수 있도록 script 태그나 link 태그를 추가해줌
      → script 태그로 직접 번들파일 설정할 필요 x
    • webpack의 설정 파일이 변경되면 html파일도 같이 업데이트

Clean Webpack Plugin ⚙️

역할

• 빌드가 될 때마다 빌드된 파일이 위치한 폴더를 비우고 새로 생성된 파일들만 남도록 해줌

Mini-CSS-Extract-Plugin ⚙️

역할

• CSS가 따로 빌드되게 해줌

Post Css ⚙️

css를 위해 사용되는 도구

역할

• js 플러그인을 추가해서 css를 어떤 목적에 맞게 변환시키는 역할

동작

• 원하는 목적에 맞는 플러그인을 찾고 post css를 통해 플러그인을 적용하여 실행

출처 📝

• Vue.js 압축 완성 올인원 패키지 Online - 패스트캠퍼스

위의 내용은 Webpack을 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌