빌드 결과 자동 정리

빌드 자동 정리 플러그인

CleanWebpackPlugin 플러그인은 Webpack에 의해 빌드(컴파일, 트랜스폼, 번들링 등) 된 결과물을 정리합니다. clean-webpack-plugin 패키지를 프로젝트에 설치한 후, Webpack 구성 파일을 열어 플러그인을 설정합니다.

패키지 설치

npm i clean-webpack-plugin -D

webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

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

빌드 명령으로 빌드 된 결과물이 출력된 화면입니다.

번들 명령을 이어서 수행하면, CleanWebpackPlugin에 의해 빌드 된 결과물이 모두 정리된 후 번들 결과물만 남습니다.

참고

npm: clean-webpack-pluginnpm