Webpack 플러그인

로더(Loader)는 특정 타입의 모듈을 변환(transform)하는 데 사용되지만, 플러그인(Plugin)은 번들 최적화(minimize), 에셋(assets) 관리 및 환경(environment) 변수 주입(injection)과 같은 광범위한 작업을 수행하는데 사용됩니다.

플러그인을 사용하려면 require() 함수를 사용해 설치된 플러그인이 불러온 후, plugins배열에 추가해야 합니다 . 대부분의 플러그인은 옵션을 통해 사용자 정의 할 수 있습니다. 목적에 따라 플러그인을 여러 번 사용할 수 있으므로 new 연산자를 사용해 플러그인 인스턴스를 만들어야 합니다 .

// 플러그인 불러오기
const Plugin = require('plugin-path')


module.exports = {
  // 플러그인 배열
  plugins: [
    // 플러그인 생성
    new Plugin({
      // 플러그인 옵션 설정
    })
  ]
}

플러그인 설정

환경 변수 등록빌드 결과 자동 정리빌드 결과 자동 주입CSS 파일 개별 추출CSS 파일 크기 최적화CSS 미디어쿼리 스플리팅이미지 파일 크기 최적화

참고

플러그인(Plugin)이란?
Webpack Plugin 목록

Last updated

Was this helpful?