<div id="readability-page-1" class="page"><div id="post-content" itemprop="articleBody">메뉴얼을 보고 안 것은 아니다. 번들 결과물을 삭제하는 옵션이 생겼다는 말을 동료로부터 들었다. 웹팩 기본 기능만으로는 빌드할 때마다 결과물이 차곡차곡 쌓이기만 했지 지울 수 없었다. clean-webpack-plugin을 사용해야 빌드전에 결과물이 저장될 곳을 정리할 수 있었다.
<a href="https://webpack.js.org/configuration/output/#outputclean">웹팩 5.20에서 추가된 삭제 옵션</a>은 이 플러그인을 대체하는 것 같다. 많이 사용하는 프로그인이라서 웹팩에 내장한 것일지도 모르겠다.
<h2 id="이전-빌드-결과을-완전히-삭제"><a href="#%EC%9D%B4%EC%A0%84-%EB%B9%8C%EB%93%9C-%EA%B2%B0%EA%B3%BC%EC%9D%84-%EC%99%84%EC%A0%84%ED%9E%88-%EC%82%AD%EC%A0%9C" aria-label="이전 빌드 결과을 완전히 삭제 permalink"></a>이전 빌드 결과을 완전히 삭제</h2>
output: { clean: boolean }
이제는 웹팩 설정만으로 이전 빌드 결과를 손쉽게 정리할 수 있게 되었다.
<div data-language="js"><pre><code>// webpack.config.js
{
 output: {
 path: path.resovle(__dirname, 'dist'),
 clean: true
 }
}</code></pre></div>
웹팩은 엔트리포인트를 시작으로 그물망처럼 연결된 모든 모듈을 찾아 하나의 파일로 합친다. 이 결과물은 output.path에 지정한 폴더에 생기는 방식이다. 이 코드에서는 dist 폴더다.
clean: true 를 설정하면 dist 폴더에 약간의 변화가 생긴다. 다음 빌드할 때 이 폴더의 내용을 깨끗이 지우고 새로 만들어질 번들 파일을 맞이할 준비를 한다. 지난밤 부지런한 청소부에 의해 말끔히 비워진 쓰레기 분리수거함처럼.
clean 옵션은 불리언 값 외에도 용도에 따라 다른 값을 사용할 수 있다.
<h2 id="유지할-파일을-직접-지정하기"><a href="#%EC%9C%A0%EC%A7%80%ED%95%A0-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%A7%81%EC%A0%91-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0" aria-label="유지할 파일을 직접 지정하기 permalink"></a>유지할 파일을 직접 지정하기</h2>
output: { clean: { keep: string | RegExp | ((filename: string) =&gt; boolean) } }
keep 속성을 사용하면 전부 지우지 않고 필요한 파일을 남길 수 있다. 정규표현식으로 유지할 파일 이름의 패턴을 지정하면 웹팩은 빌드시 이전 결과물을 정리할 때 규칙에 맞는 파일을 남겨줄 것이다. 유월절에 양의 피를 문설주에 칠하면 재앙으로부터 장자를 지킬수 있는 것처럼.
정규표현식으로 부족하다면 함수를 사용할 수 있다. keep 함수는 삭제할 파일을 인자로 전달받는데 파일명을 검사해 불리언값을 반환한다. 유지할 파일이면 true을 반환하고 그렇지 않으면 false 반환해 삭제한다.
<div data-language="js"><pre><code>// webpack.config.js
{
 output: {
 clean: {
 keep: filename =&gt; {
 console.log("debug", filename)
 return filename === "삭제되지*말아야할*파일"
 }
 }
 }
}

// 결과

// debug 삭제할*파일
// debug 삭제되지*말아야할\_파일</code></pre></div>
<h2 id="삭제할-파일을-표시만-하기"><a href="#%EC%82%AD%EC%A0%9C%ED%95%A0-%ED%8C%8C%EC%9D%BC%EC%9D%84-%ED%91%9C%EC%8B%9C%EB%A7%8C-%ED%95%98%EA%B8%B0" aria-label="삭제할 파일을 표시만 하기 permalink"></a>삭제할 파일을 표시만 하기</h2>
output: { clean: { dry: boolan } }
dry 옵션이 있는데 이것은 삭제할 파일을 표시만 한다. 테트스해보니 정말 삭제되지는 않는데 이걸 무슨 용도로 쓰는 건지 궁금했다. 배경을 찾지는 못했다. 실행해보면 삭제, 유지될 파일 목록을 출력한다.
<div data-language="js"><pre><code>// webpack.config.js
{
 output: {
 clean: {
 dry: true
 }
 }
}

// 결과
//
// LOG from webpack.CleanPlugin
// &lt;i&gt; 삭제되지*말아야할*파일 will be kept
// &lt;i&gt; 삭제할\_파일 will be removed</code></pre></div>
<h2 id="내장-플러그인과-clean-webpack-plugin"><a href="#%EB%82%B4%EC%9E%A5-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EA%B3%BC-clean-webpack-plugin" aria-label="내장 플러그인과 clean webpack plugin permalink"></a>내장 플러그인과 clean-webpack-plugin</h2>
로그에 보면 webpack.CleanPlugin이라는 내장 플러그인이 동작했다. 웹팩 코드에도 lib &gt; CleanPlugin.js 파일을 확인했다. 그럼 기존의 clean-webpack-plugin을 대체할수 있을까?
<a href="https://github.com/johnagan/clean-webpack-plugin/issues/197">비슷한 질문</a>을 찾았다. 여전히 clean-webpack-plugin만의 기능이 있어 아직은 지원 종료 할 수 없다는 내용이다. 1) clean 옵션으로는 webpack-dev-server의 output 폴더를 지울수 없는데 이 플러그인은 가능하다는 것. 2) 이 플러그인의 cleanAfterEveryBuildPatterns 옵션(매 빌드마다 패턴에 맞는 파일을 삭제하는 옵션)을 clean 옵션에서는 지원하지 않는다는 것 같다.
<h2 id="결론"><a href="#%EA%B2%B0%EB%A1%A0" aria-label="결론 permalink"></a>결론</h2>
빌드 과정에서 이전 결과물을 정리하는 절차가 간소해졌다. 외장 플러그인 없이 웹팩 설정 옵션으로만 사용 가능하다.
웹팩 4를 여전히 사용중인 곳에서는 clean-webpack-plugin이 여전히 유효하다.
<h2 id="참고"><a href="#%EC%B0%B8%EA%B3%A0" aria-label="참고 permalink"></a>참고</h2>
<ul>
<li><a href="https://github.com/jeonghwan-kim/2022-post-sample-code/tree/main/webpack-output-clean">예제 코드</a></li>
<li><a href="https://webpack.js.org/configuration/output/#outputclean">Output | webpack</a></li>
<li><a href="https://github.com/johnagan/clean-webpack-plugin/issues/197">Deprecate plugin in favor <code>output.clean</code> · Issue #197 · johnagan/clean-webpack-plugin</a></li>
</ul></div></div>

김정환 블로그 RSS Feed

김정환

메뉴얼을 보고 안 것은 아니다. 번들 결과물을 삭제하는 옵션이 생겼다는 말을 동료로부터 들었다. 웹팩 기본 기능만으로는 빌드할 때마다 결과물이 차곡차곡 쌓이기만 했지 지울 수 없었다. clean-webpack-plugin…

웹팩 빌드시 이전 결과물을 삭제하는 옵션

댓글