Roadmap 2026

Webpack 기술 운영 위원회 위원인 Even입니다!

조직의 여러 기여자들은 webpack이 웹 애플리케이션 개발을 위한 견고하고 신뢰할 수 있는 도구로 유지될 수 있도록 지속적으로 노력하고 있습니다. 많은 새로운 도구들이 등장했지만, Webpack은 여전히 ​​안정적이고 지원이 잘 되는 선택지로 남아 있습니다.

Here’s what we’re excited about for 2026

2026년에는 기존 기능 유지 관리를 넘어 더욱 폭넓은 개발에 집중할 계획입니다. Webpack을 더욱 쉽고 편리하게 사용하고 관리할 수 있도록 개선하는 데 투자하는 한편, 최신 런타임 환경, 진화하는 개발 패턴, 그리고 장기적인 생태계 발전을 위한 아이디어도 적극적으로 추진할 것입니다.

아래에서는 현재 활발히 작업 중인 주요 영역과 올해 개발 계획에 포함된 아이디어들을 간략하게 소개하겠습니다.

webpack#14893 - Support for CSS Modules without the need for plugins

현재 experimental.css 옵션이 제공되어, 이전에는 mini-css-extract-plugin과 같은 플러그인을 설정 파일에 추가해야 했던 것과 달리, 네이티브 CSS 지원을 활성화할 수 있습니다.

개발은 이미 상당히 진척되어 있으며, 2월/3월경에 webpack 코어에 통합될 가능성이 높습니다. 이후 버그 보고를 수집하기 위해 일정 기간 동안은 실험적 상태로 유지되지만, webpack 6에서는 더 이상 실험적인 기능이 아니게 되며 이 작업을 위한 플러그인이 더 이상 필요하지 않게 됩니다.

실험적 CSS 지원 토론을 팔로우하여 최신 정보를 확인하고 아이디어를 제공할 수 있습니다.

webpack#6525 - A universal target to make your code compatible across runtimes

새로운 타겟인 유니버설을 추가하여 Node, 웹, Bun, Deno 등 다양한 런타임에서 실행될 수 있도록 코드를 컴파일할 계획입니다. 애플리케이션에서 CommonJS 모듈을 사용하든 안 하든, webpack은 해당 모듈을 래핑하여 모든 결과 코드를 순수 ESM으로 만들어 런타임에 구애받지 않도록 할 것입니다.

이 목표를 향해 상당한 진전이 있었지만, ESM 출력은 아직 완전히 완성되지 않았습니다. 추가적인 수정 및 개선이 필요하며(참고: webpack#17121), 누락된 테스트 추가 및 CommonJS 래퍼 기능 완성도 필요합니다.

또한 유니버설 타겟에 참여하여 아이디어를 공유하거나 런타임 호환성 업데이트를 확인할 수 있습니다.

Support for building TypeScript without loaders

최근 버전 5.105에서 TypeScript 설정에 정의된 경로를 해석하는 기능을 추가하여 플러그인(tsconfig-paths-webpack-plugin)을 사용할 필요가 없어졌습니다. 이제 TypeScript 지원을 더욱 확장하여 로더(가장 일반적인 것은 ts-loader)를 사용하지 않고도 TypeScript를 webpack에서 직접 트랜스파일링할 수 있도록 하고자 합니다. 이를 통해 프로젝트의 종속성도 줄일 수 있습니다.

webpack#536 - Import HTML files and use them as entry points without the need for plugins

현재 HTML 파일을 가져와 진입점으로 사용하려면 플러그인(html-webpack-plugin)을 사용해야 합니다. 이 플러그인을 CSS Modules처럼 webpack 코어에 통합하여 이러한 일반적인 작업을 위한 플러그인의 필요성을 없애는 것이 목표입니다. CSS Modules처럼 이 기능은 실험적 옵션으로 도입되어 webpack 6에서는 해당 의존성을 제거할 수 있게 될 것입니다.

이 아이디어와 진행 상황은 관련 이슈(#536)에서 확인할 수 있습니다.

Webpack Everywhere (Node, Deno, and Bun, Web)

Node.js는 여전히 많은 프로젝트에서 기본 런타임이지만, 시대가 변하면서 더 이상 유일한 JavaScript 런타임은 아닙니다. Deno와 Bun과 같은 새로운 옵션들이 상당한 인기를 얻었고, webpack은 이러한 모든 런타임 환경에서 원활하게 작동해야 합니다.

목표는 webpack이 Node.js, 웹 환경, 그리고 Deno와 Bun 같은 대체 런타임 환경 등 어디에서나 실행될 수 있도록 구축하는 것입니다. node:fs와 같이 전통적으로 Node.js에 종속된 모듈을 사용하는 경우에도 webpack은 이를 지능적으로 처리하여 해당 모듈에 의존하는 코드가 브라우저 또는 해당 모듈이 존재하지 않는 다른 환경에서도 실행될 수 있도록 합니다.

이를 달성하기 위해서는 Node.js 내부 구현 및 Buffer 사용에 대한 의존도를 줄이고, 런타임에 구애받지 않는 아키텍처로 나아가며, 테스트 범위를 확장해야 합니다.

현재 Deno 지원에는 적절한 테스트가 부족하고, Bun에는 필요한 애셋과 그에 상응하는 테스트가 아직 부족합니다. 또한, 이러한 노력에는 다양한 환경에서 webpack이 제대로 작동하는지 검증하고 보여줄 수 있는 사이트 플레이그라운드를 추가하는 것도 포함됩니다.

Evaluating Lazy Barrel Optimization

흥미로운 아이디어 중 하나는 Rspack이 특정 모듈 패턴을 처리하는 방식에서 영감을 얻은 **지연 배럴 최적화(lazy barrel optimization)**입니다. Rspack의 지연 배럴 최적화는 부작용이 없는 배럴 파일에서 사용되지 않는 재내보낸 모듈은 실제로 필요할 때까지 빌드를 건너뛰는 최적화 기법입니다. 이는 특히 그룹화된 내보내기가 많은 대규모 코드베이스에서 빌드 시간을 크게 단축할 수 있습니다.

배럴 파일은 편리한 API 인터페이스를 만들기 위해 다른 모듈을 재내보내는 모듈입니다. 예를 들어, components/index.js는 디렉터리의 모든 컴포넌트를 내보냅니다. 코드 정리에는 유용하지만, 기존 번들러는 종종 하나만 사용되더라도 재내보낸 모든 모듈을 빌드하여 성능을 저하시킬 수 있습니다. Rspack의 지연 배럴 최적화를 사용하면 실제로 참조되는 모듈만 빌드하고 나머지는 건너뛰어 전반적인 빌드 속도를 향상시킵니다.

Rspack의 접근 방식을 평가하는 것은 유사한 전략이 webpack에도 적용될 수 있는지 확인할 수 있는 기회를 제공합니다. 이를 통해 개발자가 수동으로 내보내기 구조를 재구성하지 않고도 일반적으로 사용되는 배럴 패턴의 성능을 향상시킬 수 있습니다. 이는 webpack의 향후 개선 사항을 파악하기 위해 생태계 내 혁신 사례를 살펴보는 좋은 예입니다.

Simplifying Asset Minimization in Webpack

Webpack은 현재 terser-webpack-plugin, css-minimizer-webpack-plugin, html-minimizer-webpack-plugin, json-minimizer-webpack-plugin과 같은 여러 개의 개별 최소화 플러그인에 의존하고 있습니다. 각 플러그인은 독립적으로 잘 작동하지만, 개별적으로 관리하려면 추가적인 설정 및 유지 관리 부담이 발생합니다.

따라서 이 모든 플러그인을 단일 minimizer-webpack-plugin으로 통합하여 더욱 통일되고 일관된 최소화 환경을 제공하는 것이 목표입니다. 이를 통해 설정이 간소화되고, 중복이 줄어들며, 다양한 자산 유형에 걸쳐 최소화 로직을 확장하고 유지 관리하는 것이 더욱 쉬워질 것입니다.

Streamlining Webpack’s Dev Experience

Webpack의 개발 및 CLI 도구는 유지보수성을 향상시키는 동시에 기여자와 사용자 모두를 위한 새로운 기능을 도입하기 위해 개선되고 있습니다.

Dev Tooling

개발 툴링 관련 노력은 webpack의 내부 개발 워크플로우 개선과 확장 및 유지보수 용이성 향상에 중점을 두고 있습니다. 여기에는 webpack-dev-middleware와 webpack-hot-middleware 병합, dev-server에서 오버레이 기능 분리, 그리고 재사용을 위한 오버레이 및 WebSocket/EventSource 로직 통합이 포함됩니다.

또한, dev-server에 플러그인 지원이 추가되어 유연성이 향상되고 중복 구현이 줄어들 것입니다. 이러한 개선 사항은 기여자들의 개발 과정을 간소화하는 동시에 사용자에게는 webpack의 유연성과 안정성을 보장합니다.

CLI Improvements

CLI는 유지보수를 간소화하고 사용성을 개선하기 위해 다듬어지고 있습니다. 작업에는 패키지 통합, 도움말 및 하위 명령 로직 재구성, 전반적인 개발자 경험 개선이 포함됩니다(자세한 내용은 webpack-cli#4619 참조).

이러한 변경 사항은 기여자가 CLI를 더 쉽게 유지보수할 수 있도록 하는 동시에 프로젝트에서 webpack을 사용하는 개발자에게 실질적인 개선 사항을 제공합니다.

webpack-cli 개선 사항 토론을 팔로우하여 최신 정보를 확인하세요.

Accurate and Reliable Documentation

이 아이디어는 webpack의 타입과 스키마를 기반으로 모든 API 및 설정 문서를 자동으로 생성하는 것을 목표로 합니다. 이를 통해 문서가 코드의 실제 동작(새로운 API 옵션, 사용 중단 예정 기능, 타입 등)과 항상 일치하도록 보장합니다.

이 접근 방식은 webpack 웹사이트의 문서가 불완전하거나 일관성이 없다는 오랜 문제점을 해결하고 유지 관리를 용이하게 합니다. 최종 목표는 개발자에게 webpack을 쉽게 사용할 수 있도록 정확하고 신뢰할 수 있으며 최신 정보를 담은 참조 자료를 제공하는 것입니다.

Community Outreach and Engagement

문서 개선 및 활발한 유지보수에 이어, 또 다른 핵심 목표는 webpack 커뮤니티 구축 및 강화입니다. 올해는 webpack 5.105를 위한 새로운 블로그 개설을 시작으로, 기사, 컨퍼런스 발표, 기타 공개 채널을 통해 커뮤니티와의 소통을 지속적으로 확대해 나갈 계획입니다.

커뮤니티 참여를 통해 webpack은 사용 확대, 귀중한 의견 수렴, 그리고 프로젝트와 사용자 간의 더욱 강력한 유대감 형성을 도모할 수 있습니다. 또한, 이러한 소통 노력은 개선 사항, 튜토리얼, 모범 사례를 더 많은 사용자에게 전달하여 webpack 생태계를 더욱 활기차고 지속 가능하게 만드는 데 기여합니다.

Multithreading API

Webpack은 thread-loader 에서 영감을 받아 멀티스레딩 API를 개발하여 코어에 향상된 병렬 처리 기능을 도입하고자 합니다.

목표는 Webpack이 멀티스레딩 시스템을 활용하여 대규모 프로젝트의 빌드 성능을 향상시키는 것입니다. 이 작업은 아직 설계 및 논의 단계에 있으며, 유연하고 유지보수하기 쉬우며 사용하기 편리한 솔루션을 만드는 데 중점을 두고 있습니다.

Webpack은 멀티스레딩을 보다 체계적인 방식으로 통합함으로써 개발자에게 더 빠른 빌드 속도를 제공하는 동시에 구성 및 내부 로직을 깔끔하고 확장 가능하게 유지하고자 합니다. 이 작업은 확정된 기능이 아닌 지속적인 탐색 단계이며, thread-loader 는 현재 커뮤니티에서 지원하는 병렬 처리 솔루션으로 남아 있습니다.

Design and Visual Identity

저희는 프로젝트 및 기념품에 사용할 새로운 디자인 에셋을 제작하여 webpack의 전반적인 시각적 정체성을 개선하고자 합니다. 여기에는 배너, 의류, 물병, 커피잔, 양말 등 브랜드 관련 자료가 포함됩니다.

이러한 에셋은 webpack을 더욱 세련되고 알아보기 쉽게 보이게 할 뿐만 아니라, 향후 상품 판매의 가능성을 열어줍니다. 기념품 판매 수익은 webpack의 지속적인 개발 자금 지원에 직접적인 도움이 될 것입니다.

GSoC Mentorship

핵심 목표는 Google Summer of Code(GSoC) 프로그램을 통해 학생들을 멘토링하는 것입니다. GSoC는 자원 봉사자들이 주도하는 프로그램으로, 학생들이 오픈 소스 프로젝트를 효과적으로 유지 관리하는 방법을 배우도록 돕는 것을 목표로 합니다.

실습 지도를 통해 학생들은 워크플로우, 모범 사례, 그리고 코드베이스 유지 관리 접근 방식을 배우게 됩니다. 동시에, 이 멘토링 프로그램은 학생들이 경험 많은 기여자들의 지도를 받으며 필요한 기능을 개발함으로써 프로젝트의 새로운 기능 개발을 지원합니다.

이러한 경험을 통해 학생들은 미래의 유지 관리자로서 webpack뿐만 아니라 자원 봉사자들에 의해 크게 의존하는 더 넓은 오픈 소스 생태계에 기여하는 데 필요한 기술을 갖추게 됩니다.

GSoC 멘토링은 유지 관리 용이성, 지식 전달, 그리고 체계적인 기능 개발을 강조함으로써 오픈 소스 프로젝트의 장기적인 지속 가능성을 확보하고 차세대 기여자를 육성하는 데 기여합니다.

Donations and Sponsorships

webpack과 같은 오픈 소스 프로젝트는 주로 자원봉사자들에 의해 유지 관리되며, 프로젝트 전담 정규 엔지니어링 팀은 없습니다.

기부 및 후원이 늘어나는 것은 매우 중요합니다. 자금이 많아질수록 핵심 기여자들은 다른 책임과 개인적인 삶에도 불구하고 webpack 유지 관리 및 개선에 더 많은 시간을 할애할 수 있기 때문입니다.

기부를 통한 지원은 지속적인 유지 관리를 지원할 뿐만 아니라, 기여자들이 새로운 기능 개발, 버그 수정, 그리고 생태계 전반 개선에 집중할 수 있도록 해줍니다. 재정적 지원을 통해 커뮤니티는 webpack이 건강하고 활발하게 개발되는 상태를 유지하는 데 직접적으로 기여할 수 있습니다.

Preparing for Webpack 6

런타임 지원 강화(Node, Deno, Bun 및 유니버설 타겟), 문서 및 개발자 도구 개선, GSoC를 통한 신규 기여자 멘토링, 멀티스레딩 및 레이지 배럴과 같은 최적화 탐구 등 이 블로그에서 다룬 모든 노력은 webpack 6을 향한 길을 닦고 있습니다.

Core and Loader Improvements

webpack@6을 준비하고 내부 로직을 간소화하기 위해, 로더 컨텍스트 처리를 통합하는 loader-runner를 코어로 이동하는 작업을 진행하고 있습니다. 이는 코드 중복을 줄이고 유지보수성을 향상시키며 향후 기능 개선을 위한 기반을 마련합니다.

또한, 코드베이스 전반에 걸쳐 내부 TODO를 줄임으로써 더 깔끔한 기반을 마련하고 기여자들의 효율적인 작업 환경을 조성합니다.

Testing and Type Coverage

테스트 커버리지 향상과 타입 커버리지 강화는 핵심 우선순위입니다. any, unknown 및 기타 느슨한 타입 사용을 줄임으로써 webpack은 더욱 안정적이고 유지보수가 쉬워집니다. 강력한 타입과 철저한 테스트는 문제를 조기에 발견하고, 코드 변경을 하는 기여자들의 자신감을 높여줍니다.

Benchmarks and Performance

Webpack은 진행 상황을 측정하고 높은 성능 기준을 유지하기 위해 더 많은 벤치마크를 추가할 계획입니다. 이러한 벤치마크를 CI 파이프라인에 통합하면 버전 간 비교가 가능해지므로 최적화가 개발자에게 실질적인 개선을 지속적으로 제공할 수 있습니다.

Final remarks

이 목록이 유용했기를 바라며, 2026년을 기대해 주시길 바랍니다! 저희도 매우 기대하고 있습니다! 현재 저희에게 가장 중요한 목표 중 하나는 프로젝트를 지속 가능하게 운영하기 위해 충분한 기부금을 모으는 것입니다. 저희는 일정 금액 이상 기부해 주시는 분들께 기부금을 지급하고 있습니다. 또한, 장기적으로 프로젝트에 여유 자금을 확보하여 어려운 시기를 대비할 수 있도록 하고 싶습니다.

올해는 새로운 시도를 할 예정입니다. 상당한 금액을 기부해 주시는 기업/개인을 위해 제품/프로젝트/홍보 자료를 소개할 수 있는 공간을 마련할 것입니다.

저희 2026년 로드맵에 관심을 가져주셔서 감사합니다. 재정적 또는 다른 방식으로 저희 조직에 기여하고 싶으신 분은 Discord에서 개인 메시지 또는 공개 메시지를 보내주시거나, 이메일(webpack-security@openjsf.org) 또는 기술 운영 위원회(TSC) 위원에게 연락해 주시기 바랍니다.

~ webpack TSC 💙