Webpack | JavaScript 모듈 번들러 | KAITRUST AI 백과사전

📖 상세 설명

Webpack은 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다. 진입점(entry)에서 시작해 의존성 그래프를 구축하고, JavaScript, CSS, 이미지 등 모든 리소스를 하나 이상의 번들로 패키징합니다. 2012년 등장 이후 프론트엔드 빌드의 사실상 표준이었습니다.

Webpack의 핵심 개념은 Entry(진입점), Output(출력), Loaders(파일 변환), Plugins(번들 최적화)입니다. Loaders는 TypeScript, Sass 같은 파일을 JavaScript로 변환하고, Plugins는 Tree Shaking, 코드 스플리팅, 압축 등 최적화를 수행합니다.

Webpack의 강점은 강력한 코드 스플리팅과 성숙한 생태계입니다. dynamic import()로 지연 로딩을 구현하고, SplitChunksPlugin으로 공통 코드를 분리합니다. Hot Module Replacement(HMR)로 개발 시 상태를 유지하며 코드를 갱신할 수 있습니다.

최근 Vite, Turbopack 같은 더 빠른 번들러가 등장했지만, Webpack은 여전히 대규모 프로젝트와 복잡한 빌드 요구사항에 적합합니다. Next.js, Create React App 등 많은 프레임워크가 내부적으로 Webpack을 사용합니다.

💻 코드 예제

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production', // 'development' | 'production'
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true // 빌드 전 dist 폴더 정리
  },
  module: {
    rules: [
      // JavaScript/TypeScript
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      // CSS/SCSS
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      // 이미지
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all', // 코드 스플리팅
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  devServer: {
    port: 3000,
    hot: true // HMR 활성화
  }
};

🗣️ 실무에서 이렇게 말하세요

💬 빌드 최적화 회의에서

"번들 크기가 2MB가 넘어요. webpack-bundle-analyzer로 분석해보니 lodash 전체가 들어가 있네요. lodash-es로 바꾸거나 babel-plugin-lodash로 Tree Shaking하고, 코드 스플리팅으로 초기 로딩을 줄이면 될 것 같아요."

💬 면접에서

"Webpack은 Entry, Output, Loaders, Plugins 네 가지 핵심 개념이 있습니다. Loaders는 비-JavaScript 파일을 모듈로 변환하고, Plugins는 번들 최적화와 환경 변수 주입 등을 담당합니다. 코드 스플리팅은 SplitChunksPlugin과 동적 import로 구현합니다."

💬 트러블슈팅에서

"개발 서버가 느리면 source-map을 eval-cheap-module-source-map으로 바꿔보세요. 프로덕션은 hidden-source-map이 좋고요. cache: true로 빌드 캐싱 켜면 재빌드 시간이 많이 줄어요."

⚠️ 흔한 실수 & 주의사항

❌

설정 파일 복잡도 관리 실패

Webpack 설정이 수천 줄이 되면 유지보수가 어렵습니다. webpack-merge로 환경별 설정을 분리하고, 문서화하세요.

❌

번들 크기 무시

모든 코드를 하나의 번들에 넣으면 초기 로딩이 느립니다. 코드 스플리팅으로 라우트별 분할하고, 무거운 라이브러리는 지연 로딩하세요.

✅

올바른 설정

production 모드에서 자동 최적화를 활용하고, cache를 켜고, webpack-bundle-analyzer로 주기적으로 번들을 분석하세요. 새 프로젝트는 Vite 도입도 고려하세요.

🔗 관련 용어

📚 더 배우기

📄 Webpack 공식 문서 🎓 코드 스플리팅 가이드 📖 SplitChunksPlugin