> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/webpack/webpack/webpack-plugins.md).

# Webpack 플러그인

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

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

{% tabs %}
{% tab title="webpack.config.js" %}

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


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

{% endtab %}
{% endtabs %}

## 플러그인 설정 <a href="#setting-plugins" id="setting-plugins"></a>

{% content-ref url="/pages/-MTip-N9bAozWpGFebI7" %}
[환경 변수 등록](/webpack/webpack/webpack-plugins/manage-env-variables.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTnyRFArSE5PoQ\_k4ab" %}
[빌드 결과 자동 정리](/webpack/webpack/webpack-plugins/clean-build-directory.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MToLYjEPZMBr9U\_onjg" %}
[빌드 결과 자동 주입](/webpack/webpack/webpack-plugins/automatic-injection-to-html-document.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTdpeVhfyL1A98PSeCj" %}
[CSS 파일 개별 추출](/webpack/webpack/webpack-plugins/extract-css-files.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTdpkXLOPpLBwUfC3EK" %}
[CSS 파일 크기 최적화](/webpack/webpack/webpack-plugins/minimize-css-files.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTjZLnbbHtgv367DtsE" %}
[CSS 미디어쿼리 스플리팅](/webpack/webpack/webpack-plugins/css.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTgpOFJqh0RcN6\_keua" %}
[이미지 파일 크기 최적화](/webpack/webpack/webpack-plugins/minimize-images.md)
{% endcontent-ref %}

## 참고 <a href="#reference" id="reference"></a>

{% embed url="<https://webpack.js.org/concepts/#plugins>" %}
플러그인(Plugin)이란?
{% endembed %}

{% embed url="<https://webpack.js.org/plugins/>" %}
Webpack Plugin 목록
{% endembed %}