비판적 사고: Webpack (1)

목표

비판적 사고를 기르기 위해 단점부터 파고들어 문제의식을 키우고, 그다음 장점을 통해 균형 잡힌 시각을 가지기 위한 연습이며
단점과 장점을 찾는 건 시작일 뿐이고, 이 과정에서 얻은 인사이트를 실질적인 판단과 선택, 개선에까지 활용하는 것이 이 활동의 궁극적인 목표입니다.

기간

• 부정적 관점: 2025.05.19 ~ YYYY.MM.DD
• 긍정적 관점: YYYY.MM.DD ~ YYYY.MM.DD

주제

이름: Webpack
카테고리: 빌드 도구
간단한 설명:
JavaScript 애플리케이션의 모듈 번들러(Module Bundler) 입니다. 쉽게 말해, 여러 개의 JS, CSS, 이미지 등의 파일들을 하나 또는 여러 개의 번들 파일로 묶어주는 도구입니다.
(개인적으로 좋아하는 빌드 도구라서 많이 학습도 하고 현업에서도 처음부터 설정하고 확장하며 활용중인 빌드 도구입니다.)

단점 관찰 & 회의적 시선

러닝커브

• Webpack의 개념과 방대한 양의 플러그인 및 로더, 설정들을 적용하기에는 주니어 개발자에게는 진입 난이도가 높습니다.
  • 플러그인 리스트
  • 로더 리스트
• 실제로 저 또한 처음 현업에서 레거시 프로젝트의 Webpack Config 파일을 보고 절망했던 기억이 있습니다. (불필요한 설정들과 환경별로 분리가 잘되어 있지 않아서 더욱 그렇게 느꼈던 것 같습니다.)

실무 적용 난이도

• 새로운 프로젝트를 위해 처음부터 설정을 하는 경우, 시간이 꽤 많이 걸릴 수 있습니다.
• 설정 파일이 커질수록 오류 가능성이 증가합니다. 작은 옵션 하나만 잘못 변경해도 전체 빌드가 실패할 수 있습니다.
• 실제 사례로, Tines 팀은 Webpack 5로 업그레이드한 후 빌드가 15배 느려지는 현상을 겪었는데, CSS-in-JS 라이브러리와 Webpack 4 호환 코드(backCompat) 간의 충돌이 원인이었습니다.
  • Github Issues
  • Tines 팀

호환성

• 마이그레이션(Breaking Change) 이슈
  • 여타 라이브러리들도 비슷하지만, 주요 변경사항이 많아 쉽게 업그레이드 하기가 힘듭니다.
  • Node.js 기본 모듈의 폴리필 제공이 제거되어(buffer, fs 등) 직접 폴리필 패키지를 추가해야 됐습니다. (Issues Stackoverflow)
  • 설정 옵션명이 바뀌거나 사라지면서 (e.g., output.jsonpFunction→output.chunkLoadingGlobal 등) 하나라도 실수하면 빌드 오류로 이어지게 됩니다.
  • 최종 결과물을 만들어내는 빌드 시스템이 변경되기 때문에 주의하고 또 주의해야 하는 부담감이 존재합니다.
• 플러그인/로더 호환성
  • 메이저(Major) 버전이 업데이트 되면, 많은 플러그인과 로더가 버전 업데이트를 거쳤거나 교체가 필요합니다.
  • 예를 들어, 기존의 url-loader/file-loader/raw-loader 등은 더 이상 권장되지 않고 Webpack 5의 Asset Modules로 대체해야 합니다. (마이그레이션 가이드)
  • 모든 서드파티 플러그인이 Webpack 메이저 업데이트에 발맞춰서 대응하지 않습니다. 호환되지 않는 기존 플러그인을 사용하면 에러가 발생하고 해당 플러그인이 업데이트 될 때까지 Webpack을 업그레이드 하지 못합니다.

성능

• ES 모듈 형식으로 가져오지 않거나 sideEffects 설정이 잘못된 경우 불필요한 코드가 번들에 남을 수 있습니다.
  • 오히려 전역 사이드 이펙트 코드(예: CSS, 폴리필)가 제거되어 버그가 발생하기도 합니다.
  • 공식 문서에도 “올바르지 않은 sideEffects 설정은 CSS 누락이나 초기화 코드 미실행 같은 심각한 문제를 일으키며, 이는 프로덕션 빌드에서만 나타나 디버깅이 특히 어렵다”고 경고하고 있습니다. (Tree Shaking)
• 타 빌드 도구들과 비교시 항상 빌드 속도가 느리다는 여론과 근거가 많습니다.
  • 컴포넌트 5000개 기준으로 Vite와 빌드속도만 비교해보니 일반적인 경우에는 Webpack이 느립니다. (빌드 성능 비교: Webpack vs Vite)

  • 회차	Webpack (Done in)	Vite (Done in)
    1	7.08s	2.12s
    2	6.70s	2.17s
    3	6.66s	2.32s
    4	6.81s	2.10s
    5	6.74s	2.07s
    6	6.84s	2.10s
    7	6.80s	2.17s