Webpack 이란 무엇인가?

이도형·2024년 10월 6일

web

Webpack 개념

Webpack은 웹에서 사용되는 모든 자원(assets)를 묶어주는,
Node 모듈 중 하나이자, JavaScript 애플리케이션을 위한 모듈 번들러입니다.

Webpack 특징

모듈 관리

Webpack은 CSS, 이미지, JS, 폰트 등 다양한 자원을 모듈로 간주하여 효과적으로 관리합니다.

코드 분할

특정 모듈을 로드할 수 있도록 코드를 분할하는 기능을 제공해 로딩 시간을 줄여줍니다.

번들링

다양한 모듈을 파일로 번들링하여 웹 앱의 성능을 향상시킵니다.
ex.) HTTP 요청 수를 줄여 페이지 로딩 속도를 개선

실시간 변경 가능

Webpack Dev Server를 통해 실시간으로 변경이 가능하고, 이는 개발 편의성을 향상시킵니다.

Webpack 설치 및 사용 방법

1. npm 초기화

$ npm init -y

npm을 초기화하여 package.json을 생성합니다.

2. 설치

$ npm i -D webpack webpack-cli

Webpack과 Webpack CLI를 설치합니다. 이 때 Webpack CLI는 명령줄에서 Webpack을 사용가능하게 합니다.

3. 기본 파일 생성

webpack.config.js 파일을 루트 디렉토리에 생성합니다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // 진입점 파일
  output: {
    filename: 'bundle.js', // 출력 파일 이름
    path: path.resolve(__dirname, 'dist'), // 출력 디렉토리
  },
  mode: 'development', // 모드 설정
  module: {	// 모듈 처리 방법
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

entry : 애플리케이션 진입점 (시작 파일)을 지정합니다.
output : 번들된 파일의 출력 경로 및 파일 이름을 설정합니다.
(filename : 출력 파일 이름, path : 출력 디렉토리 절대 경로)
mode : Webpack의 동작 모드 (development, production, none)
development : 개발 중 사용, 소스 맵이 포함되어 디버깅이 용이
production : 최적화된 빌드 생성, 코드 압축 및 최적화가 적용
module : 모듈을 처리하는 방법, Loader를 설정해 파일 형식을 처리합니다.

일반적인 Loader 종류
babel-loader : ES6+ 코드를 ES5로 변환하여 구형 브라우저와 호환성 증가
css-loader : CSS 파일을 JS 모듈로 변환하여 import/export
style-loader : CSS를 DOM에 삽입하여 스타일 적용
file-loader : 파일을 복사하고 URL 반환하여 이미지와 같은 파일 처리
sass-loader : Sass 파일을 CSS로 변환
url-loader : 파일 크기가 지정된 임계값 이하의 경우 Base64 URL로 변환

module: {
  rules: [
    {
      test: /\.js$/, // 파일 확장자
      exclude: /node_modules/, // 제외할 디렉토리
      use: {
        loader: 'babel-loader', // 사용할 로더
        options: {
          presets: ['@babel/preset-env'], // Babel 설정
        },
      },
    },
  ],
}

plugins : Webpack 기능을 확장하는 플러그인 설정, 플러그인은 빌드 프로세스의 여러 단계에서 작업 수행

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html', // 템플릿 파일
  }),
]

resolve : Module 해석 방식 설정, 주로 파일 확장자 지정하거나 별칭 설정

resolve: {
  extensions: ['.js', '.jsx'], // 해석할 파일 확장자
  alias: {
    '@': path.resolve(__dirname, 'src'), // 경로 별칭
  },
}

devServer : Webpack Dev Server의 설정 정의, 개발 중 실시간 변경 사항 반영 가능

devServer: {
  contentBase: path.join(__dirname, 'dist'), // 서빙할 디렉토리
  compress: true, // gzip 압축 사용
  port: 9000, // 포트 번호
}

4. 파일 생성 및 빌드

index.js 파일을 생성한 후 빌드를 아래와 같이 진행합니다.

$ npx webpack

이렇게 빌드를 하면 dist 폴더의 bundle.js가 생성됩니다.

Webpack vs. npm

대표적인 패키지 관리 도구인 npm과 비교하면 다음과 같습니다.

목적

npm : 패키지 관리 도구, 라이브러리와 모듈 설치, 버전 관리, 프로젝트 의존성 정의
Webpack : 모듈 번들러, 다양한 자원(assets)를 하나의 파일로 번들링, 웹 앱 성능 최적화

기능

npm : 패키지 설치/업데이트/삭제, package.json을 통해 의존성관리
Webpack : 모듈 분석/번들링/코드 분할, webpack.config.js파일을 통해 빌드 관련 기능 제공

yarn

yarn은 npm의 대안으로 yarn.lock을 통해 정확한 버전의 패키지를 보장하는 패키지 관리 도구 입니다.

Webpack의 사용 사례

Webpack은 웹 앱 개발에 유용한 도구로 다음과 같은 사례에 사용됩니다.

Single Page Application : Webpack을 통해 모듈 번들링, 코드 분할, 리소스 최적화로 성능을 향상합니다.
라이브러리 및 프레임워크 빌드 : 라이브러리와 프레임워크 빌드 시 Webpack을 통해 의존성을 관리합니다.
Server-side Rendering : Next.js에서 Webpack을 통해 SSR 구현이 가능하고, 이 때 SEO 개선에 도움이 됩니다.
파일 형식 처리 : 다양한 파일의 형식을 처리하여 개발자가 자원을 통합하여 작업을 가능하게 합니다.