정정지용
기술스택 목록
도구

Webpack

프로젝트 1개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

여러 개의 자바스크립트 모듈과 자원을 하나의 번들로 묶어주는 모듈 번들러

Webpack은 프로젝트를 구성하는 자바스크립트, CSS, 이미지 등 다양한 파일을 의존성 그래프로 분석해 브라우저가 실행할 수 있는 하나 또는 여러 개의 번들 파일로 합쳐주는 도구다. 브라우저가 모듈 시스템을 기본 지원하지 않던 시절, 여러 개의 스크립트 파일을 수동으로 순서대로 연결해 로드해야 했던 문제를 해결하기 위해 만들어졌다. 로더와 플러그인을 통해 트랜스파일, 압축, 코드 스플리팅 같은 빌드 과정을 확장할 수 있고, 개발 서버와 결합해 코드 변경 시 자동으로 반영하는 개발 환경도 제공한다.

이럴 때 사용합니다

  • 여러 모듈과 정적 자원을 하나의 배포 가능한 번들로 통합해야 할 때
  • 개발 중 코드 변경을 즉시 브라우저에 반영하는 핫리로드 환경이 필요할 때
  • 로더·플러그인 생태계를 활용해 세밀하게 빌드 과정을 커스터마이징하고 싶을 때
  • 코드 스플리팅과 최적화로 프로덕션 번들 크기를 줄이고 싶을 때

핵심 개념

Entry
번들링을 시작하는 진입점 파일로, Webpack은 여기서부터 의존성 그래프를 따라가며 필요한 모듈을 수집한다.
Output
번들링된 결과물을 어떤 파일명과 경로에 저장할지 정의하는 설정이다.
Loader
자바스크립트가 아닌 파일(CSS, 이미지, TypeScript 등)을 Webpack이 이해할 수 있는 모듈로 변환해주는 변환기다.
Plugin
번들 최적화, 환경 변수 주입, HTML 생성 등 로더가 다루지 못하는 빌드 전 과정에 개입해 기능을 확장하는 요소다.
HMR (Hot Module Replacement)
코드 변경 시 페이지 전체를 새로고침하지 않고 변경된 모듈만 브라우저에서 교체해 상태를 유지한 채 개발할 수 있게 해주는 기능이다.
Code Splitting
하나의 큰 번들 대신 필요한 시점에 로드되는 여러 개의 작은 번들로 나눠 초기 로딩 성능을 개선하는 기법이다.

기본 Webpack 설정 파일

src/index.js를 진입점으로 삼아 CSS를 로더로 처리하고, dist/bundle.js로 번들을 출력하며 devServer의 HMR로 개발 중 변경 사항을 즉시 반영하는 설정이다.

JavaScript
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: './dist',
    hot: true, // HMR 활성화
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
};

처음 쓸 때 흔한 함정

  • 설정 파일 하나에 모든 로더·플러그인을 몰아넣으면 복잡도가 급격히 커진다
  • 개발용(mode: development)과 배포용(mode: production) 설정을 분리하지 않으면 최적화가 누락된다
  • HMR은 프레임워크나 상태 관리 방식에 따라 별도 설정이 추가로 필요할 수 있다

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

DockerJenkinsNestJSTypeORMTypeScript