Webpack — 개념, 아키텍처 및 작동 원리

Webpack이란?

Webpack은 애플리케이션의 종속성을 분석하고 브라우저 또는 서버용 정적 파일로 패키징하는 모듈 번들러입니다. 2012년 Tobias Koppers가 만든 Webpack은 모든 파일은 모듈이다라는 개념 덕분에 빠르게 빌드 표준이 되었습니다. JavaScript, CSS, 이미지, 폰트, 심지어 HTML까지 단일 로더 시스템을 통해 처리됩니다.

Webpack이 업계 표준이 된 이유

Webpack은 당시로서는 혁신적인 아이디어를 도입했습니다. 로더를 사용하면 import 또는 require를 통해 모든 리소스를 포함할 수 있습니다. 이를 통해 개발자는 CSS 전처리기(SCSS), TypeScript 컴파일러 및 이미지 최적화 도구를 별도로 사용할 필요가 없게 되었습니다. 2020년까지 JavaScript 프로젝트의 80% 이상이 Webpack을 사용했습니다(npm stat 데이터: 2019~2024).

경쟁 제품인 Vite, Parcel 및 Turbopack은 더 빠른 개발 속도를 제공하지만, Webpack은 안정성, 성숙한 생태계 및 하위 호환성 덕분에 엔터프라이즈 부문에서 리더십을 유지하고 있습니다. 대규모 프로젝트에서 Webpack에서 Vite로 마이그레이션하는 데는 몇 주가 소요되며 플러그인 비호환성으로 인해 차단되는 경우가 많습니다.

Webpack 작동 방식

Webpack은 진입점에서 시작하여 종속성 그래프를 구축합니다. 발견된 각 import 또는 require는 그래프에 추가되고, 로더 체인을 통과하며, 청크에 배치됩니다. 최종 출력은 구성에 따라 달라집니다: 단일 번들, 여러 청크 또는 UMD, CommonJS, ES Module 형식의 라이브러리 출력입니다.

Webpack 빌드 프로세스

// 최소 Webpack 5 구성
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true,
  },
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, filename: 'vendor.[contenthash:8].js' } },
    },
  },
};

Webpack 5는 파일 시스템 기반의 내장 캐시를 도입하여 재빌드를 2~5배 더 빠르게 했습니다. 영구 캐싱은 실행 간 모듈 변환 결과를 저장하며, 이는 CI/CD에서 특히 중요합니다. 활성화하려면 구성에 cache: { type: 'filesystem' }을 추가하기만 하면 됩니다.

Webpack 주요 개념

Webpack은 네 가지 기본 개념으로 작동합니다: Entry(진입점), Output(출력), Loaders(변환), Plugins(확장). 이러한 개념을 이해하는 것은 간단한 사이트에서 복잡한 엔터프라이즈 애플리케이션에 이르기까지 모든 빌드를 구성하는 데 필요합니다.

Entry, Output 및 모드

Entry는 하나 이상의 진입점을 정의하는 배열 또는 객체입니다. 멀티 엔트리는 다중 구성 요소 애플리케이션에 사용됩니다. Output은 출력 파일의 경로, 이름 템플릿, 공개 URL을 구성합니다. Mode(development, production, none)는 각 모드에 최적화된 플러그인과 기본값을 자동으로 활성화합니다.

Content Hash — 파일 이름에 콘텐츠 해시([contenthash])를 포함하면 장기 캐싱이 보장됩니다. 브라우저는 콘텐츠가 변경된 경우에만 새 파일을 로드합니다. SplitChunksPlugin은 다른 진입점의 공통 종속성을 자동으로 별도의 청크로 추출하여 코드 중복을 방지합니다.

Loaders 및 Plugins

Loaders는 소스 파일을 종속성 그래프에 추가하기 전에 변환합니다. 각 로더는 파일 콘텐츠를 받아 JavaScript 모듈을 반환하는 함수입니다. Plugins는 시작부터 출력 파일 생성까지 빌드 라이프사이클 전체에 액세스할 수 있는 더 강력한 확장 기능입니다.

인기 있는 로더와 그 목적

Plugins은 로더와 달리 빌드의 모든 단계에서 작업을 수행할 수 있습니다. HtmlWebpackPlugin은 연결된 스크립트가 포함된 HTML 파일을 자동 생성합니다. MiniCssExtractPlugin은 병렬 로딩을 위해 CSS를 별도의 파일로 추출합니다. DefinePlugin은 빌드 중에 환경 변수를 애플리케이션 코드로 전달할 수 있게 합니다.

Webpack 빌드 최적화

Webpack은 트리 쉐이킹, 코드 분할 및 압축과 같은 내장 최적화 메커니즘을 제공합니다. Tree shaking은 ES 모듈에서 사용되지 않는 내보내기를 제거합니다. Code splitting은 import()를 통해 번들을 동적 청크로 분할합니다. Minimizer — JS용 TerserPlugin 및 CSS용 CssMinimizerPlugin.

고급 최적화 기술

// webpack.config.js — 프로덕션 빌드 최적화
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: { compress: { drop_console: true }, mangle: true },
      }),
      new CssMinimizerPlugin(),
    ],
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      maxAsyncRequests: 30,
    },
  },
};

Module Federation은 마이크로 프론트엔드를 위한 Webpack 5의 가장 강력한 기능입니다. 런타임에 다른 독립적인 빌드에서 모듈을 로드할 수 있습니다. 각 마이크로 애플리케이션은 독립적으로 개발 및 배포되지만 사용자에게는 단일 인터페이스로 조합됩니다. Segment Analytics는 2021년부터 프로덕션에서 Module Federation을 사용하여 배포 시간을 80% 단축했습니다.

React Native 및 웹 프로젝트를 위한 Webpack

Webpack이 React Native에서 직접 사용되는 경우는 드뭅니다. 이를 위해 Metro가 있습니다. 그러나 단일 코드베이스를 모바일 플랫폼(Metro 통해)과 웹(Webpack 통해) 모두용으로 빌드하는 React Native Web 프로젝트에서는 Webpack이 사용됩니다. Webpack은 Ionic 및 Cordova의 하이브리드 애플리케이션에서도 인기가 있습니다.

크로스 플랫폼 빌드를 위한 Webpack

웹 렌더링에 React Native Web을 사용하는 프로젝트의 경우, 네이티브 모듈을 웹 구현으로 대체하는 별칭을 사용하여 Webpack이 구성됩니다. Alias react-native → react-native-web을 사용하면 가져오기를 변경하지 않고 공유 컴포넌트를 사용할 수 있습니다. DefinePlugin은 플랫폼별 코드의 조건부 컴파일을 위해 플랫폼 플래그를 전달합니다.

모바일 웹을 위한 Webpack 최적화는 데스크톱과 다릅니다. 모바일 우선 빌드에는 적극적인 축소, 이미지 지연 로딩 및 중요 CSS의 우선 로딩이 포함됩니다. CompressionPlugin과 brotli 압축을 사용하면 3G/4G 모바일 네트워크에서 번들 크기를 20~25% 줄일 수 있습니다. webpack-merge를 사용하여 모바일 우선 및 데스크톱 최적화 빌드 등 다양한 플랫폼에 대한 구성을 분할하세요.

Webpack 5 Module Federation: 마이크로 프론트엔드

Module Federation은 npm에 게시하지 않고 다른 독립적인 빌드에서 JavaScript 모듈을 로드할 수 있는 Webpack 5의 혁신적인 기능입니다. 각 마이크로 애플리케이션은 독립적으로 개발되며, 자체 Webpack 구성을 가지고 별도로 배포됩니다. Host 애플리케이션은 ModuleFederationPlugin의 특별 구성을 통해 원격 빌드의 모듈을 연결합니다.

제공자는 선택한 모듈을 노출(expose)하고, 호스트는 remotes를 사용하여 연결합니다. Module Federation은 공유 라이브러리를 지원합니다. 두 마이크로 애플리케이션에서 React가 사용되는 경우 Webpack은 이를 한 번만 로드합니다. 이로 인해 사용자 트래픽이 최대 60% 절약됩니다. Segment 및 Best Buy를 포함한 대기업들은 프로덕션에서 Module Federation을 사용하여 배포 시간을 시간 단위에서 분 단위로 단축했습니다.

일반적인 문제 및 해결 방법

Module Federation을 사용할 때 개발자는 다양한 버전의 공유 종속성 충돌을 자주 경험합니다. 해결 방법은 중요한 라이브러리에 대해 requiredVersion과 singleton: true를 명시적으로 지정하는 것입니다. 또 다른 문제는 특히 React Context 및 Redux를 사용할 때 원격 빌드에서 컴포넌트를 가져올 때 컨텍스트가 손실되는 것입니다. 이를 해결하려면 shared: { react: { singleton: true } }를 사용하여 모든 마이크로 애플리케이션이 단일 React 인스턴스를 사용하도록 합니다. 대규모 마이크로 프론트엔드 아키텍처의 경우, 공유 종속성 버전을 동기화하고 빌드 일관성을 보장하기 위해 Module Federation을 모노레포 시스템(Nx, Turborepo)과 함께 사용하는 것이 좋습니다.