Webpack 플러그인

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

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

webpack.config.js

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


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

플러그인 설정

환경 변수 등록빌드 결과 자동 정리빌드 결과 자동 주입

CSS 파일 개별 추출

CSS 파일 크기 최적화

CSS 미디어쿼리 스플리팅

이미지 파일 크기 최적화

참고

Concepts | webpackwebpack

플러그인(Plugin)이란?

Plugins | webpackwebpack

Webpack Plugin 목록