Webpack clean 옵션으로 인한 bundle 삭제 문제 해결하기

 

최근 프로젝트에서 Webpack을 사용하여 번들을 생성하는 과정에서 아주 황당한 일을 겪었다. 두 개의 Webpack 설정을 사용해 서로 다른 번들을 만들도록 구성했는데, 첫 번째 설정으로 번들을 생성한 후 두 번째 설정을 실행하면 첫 번째 번들이 사라지는 문제가 발생했다.

처음에는 "어? 방금 만든 번들이 어디 갔지?" 하면서 경로를 잘못 지정했나 싶었지만, 로그를 확인해 보니 파일이 정상적으로 생성된 후 삭제된 것이었다. 이 문제를 추적하다 보니, 원인은 바로 Webpack의 clean 옵션이었다.

 

https://webpack.kr/

 

1. Webpack의 clean 옵션이란?

Webpack에서 clean 옵션은 번들링을 수행할 때 기존 파일을 삭제하는 기능을 한다. 기본적으로 output.path에 해당하는 디렉터리를 정리하여 불필요한 파일이 남지 않도록 도와준다.

 

clean 옵션 기본 값

먼저 중요한 사실부터 짚고 가면, 사실 Webpack 5 기준으로 clean 옵션의 기본값은 false이다. 즉, 명시적으로 설정하지 않으면 기존 파일을 자동으로 삭제하지 않는다. 

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,  // 기존 파일 삭제
  }
};

 

위 설정처럼 clean: true로 설정하면 output.path 경로에 있는 기존 파일을 모두 삭제한 후 새로운 번들을 생성한다. 이 기능 자체는 매우 유용하지만, 여러 개의 Webpack 설정을 사용할 때는 문제가 될 수 있다. 이렇게 단순하게 명시되어있는 경우에는 옵션을 변경하여 해결하면 된다.

 

 

https://webpack.kr/guides/output-management/#cleaning-up-the-dist-folder

Output Management | 웹팩

 

 

2. 두 개의 Webpack 설정에서 번들이 사라지는 문제

하나의 프로젝트에서는 Webpack 설정 파일이 두 개가 있는 경우에 번들이 사라지는 경우는 아래 예시가 있다.

- webpack.config.client.js → 클라이언트 번들 생성
- webpack.config.server.js → 서버 번들 생성
이 두 개의 설정에서 동일한 output.path(dist/)를 사용하고, clean: true 옵션이 설정되어 있다고 하자.

 

번들 삭제가 발생하는 과정

1. webpack --config webpack.config.client.js 실행
- 클라이언트 번들 생성 (dist/ 폴더에 저장)
- clean: true로 인해 기존 dist/ 폴더를 정리
- 결과적으로 dist/에는 클라이언트 번들만 존재

2. webpack --config webpack.config.server.js 실행
- 서버 번들 생성 (dist/ 폴더에 저장)
- 또다시 clean: true가 적용되어 기존 dist/ 폴더가 삭제됨
- 결국 클라이언트 번들이 사라짐

 

즉, 클라이언트 번들을 만든 후 서버 번들을 만들면 클라이언트 번들이 삭제되는 문제가 발생한다. 정의된 옵션이나 순서에 따라서 간헐적으로 삭제될 수 도 있어서 문제 발견이 쉽지 않을 수 도 있다. 

 

 제 경우에는 webpack config를 래핑하여 특정 프로젝트 컨셉에 맞고 더 쉽게 사용할 수 있도록 만든 라이브러리로 webpack config를 사용했는데 알고 봤더니 내부적으로 clean 옵션이 true로 지정되어있어 문제를 바로 인지할 수 없었다. webpack config를 래핑한 라이브러리등을 쓰는 경우에는 clean 옵션을 의심해보면 좋을 것 같다.

 

 

결론

Webpack 설정을 다룰 때는 이런 작은 차이점이 큰 문제를 일으킬 수 있으니, clean 옵션을 사용할 때 꼭 주의하면 좋을 것 같다.