[Webpack] 기존 빌드 삭제하기(clean-webpack-plugin)

 

Intro.

각 번들에 해시값을 명시하여 사용할 경우, 매 빌드 혹은 dev server를 통한 live / hot reload기능을 사용할 경우, 굉장히 많은 양의 레거시 파일들이 생성됩니다. 당연하지만 매번 손수 삭제하긴 상당히 귀찮기에, 몇몇 설정을 통해 간단히 해결 가능합니다.

 

Goal

Before

After

 

Method 1 (내장 모듈 사용하기)

 

1. config 파일 output에, clean 프로퍼티를 명시합니다.

 module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader'
          }
        ]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, '../dist')
    clean: true
  },

 

clean 프로퍼티에 오브젝트 객체를 할당할 수 있습니다.

• dry [boolean? = false] : true시, 빌드마다 타깃 파일들을 삭제하지 않고 콘솔에 출력합니다 (삭제 대상 출력)
• keep [string?]: regex,  조건을 만족하는 파일들을 삭제 대상에서 배제합니다. ex) /\.png$/   

 

단, 이 방법으로 하면 dev-server사용 시, 작동을 안하는 버그가 있습니다.

https://github.com/webpack/webpack-dev-middleware/issues/861 (2년째 픽스 안되고 있네요..)

 

따라서, clean-webpack-plugin의 도움을 받아 해당 문제를 해결합니다.

 

Method 2 (clean-webpack-plugin)

 

1. clean-webpack-plugin 설치합니다.

yarn add -D clean-webpack-plugin

 

2. config 파일 / plugins 배열에 해당 모듈을 추가합니다. (기본적으로 하는 동작은 output.clean과 동일합니다)

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

plugins: [
   ....,
    new CleanWebpackPlugin()
  ]
  
  // 당연하지만 빌드 이전에 이전 빌드 결과를 지우고 싶으므로, 맨 마지막 인덱스에 해당 플러그인을 배치합니다.

 

현재 저는 '/dist'가 기본 경로로 되어있는데, 만약 외부 경로에 빌드 시, 삭제하고 싶은 디렉토리가 있다면, 다음과 같은 옵션을 주어 삭제 가능합니다.

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

plugins: [
   ....,
    new CleanWebpackPlugin({
//      dry : true, output.dry와 동일
//      verbose: true, 과정에 대한 로그 작성
      cleanOnceBeforeBuildPatterns: [path.join(process.cwd(), 'path to clean'],
      dangerouslyAllowCleanPatternsOutsideProject: true,
    })
  ]

cleanOnceBeforeBuildPatterns : (default)['**/*']

• 배열 요소에 !<- 표기를 통해 삭제 대상에서 제외 가능합니다. ex) cleanOnceBeforeBuildPatterns:['**/*','!assets/**/*']

 

 

 

https://www.npmjs.com/package/clean-webpack-plugin

clean-webpack-plugin