Webpack5 출시, 새로운 기능은?

 가장 최신의 릴리즈 버전이었던 Webpack4 버전은 2년(2018년) 전이 마지막이었다. 이에 이어 5번째 Webpack 릴리즈판이 2020년 10월 10일 공개됐다. Webpack5는 다음 5가지 사안을 중점적으로 변화를 꾀했다.

 

1. Faster builds with persistent caching (영구적인 캐싱으로 더 빨라진 빌드)

: an opt-in filesystem cache(옵트인 파일시스템 캐시)를 제공한다. 이에 빌드 속도가 빨라졌다.

 

2. Smaller bundle sizes (더 작은 번들 사이즈)

Tree Shaking(dead code elimination이라고도 함)이 개선됐다. Tree Shaking이란 사용하지 않는 코드를 제거한다. 버전 5에서는 이 기능이 더 수월해졌다. 모듈 내부에 있는 코드를 제거할 수 있게 됐고 이에 따라 번들 사이즈는 더 작아졌다.

???

 

3. Better long term caching (더 좋아진 장기 캐싱)

<주석이나 변수명처럼 최소화 버전(the minimized version)을 변경시키지 않는> 코드로 인해 => 캐시가 삭제 혹은 해체되는 결과(캐시 무효화)를 낳지 않는다. 즉, 사용자가 더 장기적으로 캐싱을 활용할 수 있다는 말이다. 이는 또한 앱 로딩 시간을 개선한다.

 

4. Breaking changes now to allow further improvements later (나중의 개선하기 위한 변경사안)

5버전의 변경 사항 중 일부는 현재 어플리케이션 성능에 눈에 띄는 영향을 미치지 않기도 한다. 대신에 5버전 이후의 버전에서 새로운 기능과 개선 사항이 반영되도록 한다.

 

1) 이러한 향후 개선을 위한 기능에는 대표적으로 <using http(s) import as module externals(http 불러오기를 외부 모듈로서 사용)>가 있다. 이 기능은 webpack.js.org/blog/2020-10-10-webpack-5-release/#experiments 여기서 확인!

 

2) 또 다른 사항으로는 최소 Node.js 버전을 6버전에서 10.13.0버전으로 바꾸는 것이다. Node.js의 오래된 버전 지원을 중단한다면 코드를 단순하게 작성할 수 있도록 하고, 이런 구 버전을 지원하기 위한 해결책들을 삭제할 수 있다.

 

3) 그 밖에도 웹팩5는 WebAssembly, Async Web Assembly, Top Level Await, outputting your bundles as a module을 지원하는 실험적인 옵션들을 제공한다.

 

5. Module Federation (모듈 연합)

모듈 연합이란 여러 개의 웹팩 빌드가 같이 작동할 수 있도록 하는 것이다. 애플리케이션이 다른 어플리케이션에서 코드를 동적으로 로드할 수 있다. 자세한 내용은 다음을 참고하라.

webpack.js.org/concepts/module-federation/

 

 

 

 **업그레이드는 어떻게 해야할까? 

A. 빠른 시일 내에 업그레이드 해야할까요?

이것은 상황별로 다를 것입니다. 프로젝트에서 웹팩을 사용하는 방식에 따라 다릅니다.

웹팩을 사용하는 대부분의 개발자는 많은 플러그인을 사용할 것입니다. 사용하는 플러그인이 새 버전을 지원하는지 확인해야 합니다.

 

B. Next JS는 어떻게 해야할까요?

package.json에서 버전을 원사 해상도로 설정해서 Webpack5로 업그레이드할 수 있습니다. 그러나 사용자 지어 웹팩 구성이 있는 경우에는 그 구성이 웹팩5에서 작동하는지 확인해야 합니다.

 

C. Create-React-App은 어떻게 해야하나요?

Create-React-App의 장점이자 단점은 웹팩 구성을 사용자가 정의하는 방법이 없다는 것입니다. 따라서 react-scripts가 웹팩5를 지원하도록 업그레이드될 때까지 기다려야 합니다. 

 

버전 4에서 5로 이전하는 방법에 대한 자세한 내용은 공식 가이드를 확인하세요.

webpack.js.org/migrate/5/

 

 

 

참고 사이트

medium.com/frontend-digest/whats-new-in-webpack-5-ef619bb74fae