# 빌드 자동 정리 구성

## 1. CleanWebpackPlugin 설치 <a href="#build-automatic-cleanup-plug-in" id="build-automatic-cleanup-plug-in"></a>

Webpack에 의해 빌드 된 결과물을 자동 정리하는 플러그인을 활용하기 위해 [clean-webpack-plugin](https://www.npmjs.com/package/clean-webpack-plugin) 패키지를 프로젝트에 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i clean-webpack-plugin -D
```

{% endtab %}
{% endtabs %}

Webpack 구성 파일의 `plugins` 항목에 CleanWebpackPlugin 플러그인을 구성합니다.

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

```javascript
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// ...

module.exports = (_env, argv) => {
  // ...
  return  {
    // 플러그인 설정
    plugins: [
      // 플러그인 인스턴스 생성
      new CleanWebpackPlugin({
        // 플러그인 옵션 셜정
        // dry 기본 값: false
        // dry: true,
        // verbose 기본 값: false
        verbose: true,
        // cleanOnceBeforeBuildPatterns 기본 값: ['**/*']
        cleanOnceBeforeBuildPatterns: [
          '**/*',
          // build 폴더 안의 모든 것을 지우도록 설정
          path.resolve(process.cwd(), 'build/**/*')
        ]
      })
    ]
  }  
}
```

{% endtab %}
{% endtabs %}