Webpack이란?

카테고리 없음

Webpack이란?

next.js 2025. 3. 9. 19:51

웹팩(📦Webpack)이 뭐고, 왜 필요한지, 그리고 어떻게 동작하는지 확실히 정리해볼게요!

이걸 알면 React, Vue 같은 프레임워크에서 웹팩이 어떻게 활용되는지도 이해할 수 있어요.

📌 1. Webpack이란?

👉 **Webpack은 JavaScript 애플리케이션을 위한 "모듈 번들러(Module Bundler)"**예요.

👉 HTML, CSS, JavaScript, 이미지 같은 모든 자원을 하나로 묶어서 최적화해줘요.

🚀 간단히 말하면?

여러 개의 JS 파일을 하나의 번들(bundle)로 묶어줌
CSS, 이미지, 폰트 같은 리소스도 관리 가능
최신 ES6+ 문법을 변환해서 브라우저에서 실행 가능하도록 해줌
코드 스플리팅(Code Splitting) 기능으로 성능 최적화 가능

✅ 왜 Webpack이 필요할까?

👉 웹 개발에서는 HTML, CSS, JS가 따로따로 로딩되는데, 파일이 많아지면 속도가 느려져요.

👉 웹팩을 사용하면 이 파일들을 하나로 묶어서 로딩 속도를 최적화할 수 있어요!

🔥 2. Webpack의 핵심 개념

웹팩은 4가지 핵심 개념으로 구성돼 있어요.

✅ 1) Entry (입력 파일)

웹팩이 파일을 읽기 시작하는 **진입점(entry point)**이에요.

보통 index.js, app.js 같은 파일을 설정해요.

module.exports = {
  entry: './src/index.js',
};

➡️ index.js 파일을 시작점으로 삼고, 여기서 필요한 모듈들을 하나로 묶어요.

✅ 2) Output (출력 파일)

번들링된 파일을 어디에 저장할지 설정해요.

보통 dist/bundle.js로 출력돼요.

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
};

➡️ bundle.js 파일이 dist 폴더에 생성돼요.

✅ 3) Loaders (로더)

웹팩은 기본적으로 JS 파일만 이해할 수 있어요.

하지만, CSS, 이미지, 폰트 같은 파일도 번들링하려면 **로더(Loader)**를 사용해야 해요.

✔️ 예제: CSS 로더 설정

module.exports = {
  module: {
    rules: [
      {
        test: /\\.css$/,  // .css 파일을 찾음
        use: ['style-loader', 'css-loader'], // 적용할 로더 지정
      },
    ],
  },
};

➡️ .css 파일을 만나면 style-loader와 css-loader가 적용돼요.

✔️ 자주 사용하는 로더

babel-loader → 최신 JS(ES6+)를 구형 브라우저에서도 실행 가능하도록 변환
css-loader → CSS 파일을 JS에서 import 할 수 있게 변환
style-loader → 변환된 CSS를 <style> 태그로 삽입
file-loader → 이미지, 폰트 파일을 번들링

✅ 4) Plugins (플러그인)

웹팩의 기능을 확장하는 역할을 해요.

✔️ 예제: HTML 자동 생성 플러그인

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',  // 이 HTML을 기반으로 번들링된 파일을 포함한 새 HTML 생성
    }),
  ],
};

➡️ index.html 파일을 자동으로 생성하고, 번들링된 JS 파일을 포함해줘요.

✔️ 자주 사용하는 플러그인

HtmlWebpackPlugin → HTML 파일을 자동으로 생성
MiniCssExtractPlugin → CSS 파일을 별도로 분리 (CSS 코드 스플리팅)
TerserPlugin → JS 코드 압축 (최적화)

⚡ 3. Webpack의 동작 과정

웹팩이 번들링하는 과정은 다음과 같아요.

1️⃣ Entry 설정

웹팩이 어디서부터 시작할지(entry) 설정

entry: './src/index.js'

2️⃣ 필요한 파일들(모듈) 찾기

index.js 안에서 import 되어 있는 모든 파일을 찾아요.

import './styles.css';
import logo from './logo.png';

3️⃣ Loaders로 변환

CSS, 이미지 파일 같은 JS가 이해하지 못하는 파일들을 변환해요.

module: {
  rules: [{ test: /\\.css$/, use: ['style-loader', 'css-loader'] }]
}

4️⃣ Plugins로 추가 기능 적용

HTML 파일을 자동 생성하거나, JS/CSS를 최적화해요.

plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]

5️⃣ Output으로 번들링된 파일 저장

변환된 JS 파일을 dist/bundle.js로 저장!

output: {
  path: __dirname + '/dist',
  filename: 'bundle.js'
}

🚀 4. Webpack 최적화 방법

웹팩을 잘 활용하면 웹사이트 성능을 크게 향상시킬 수 있어요!

✅ 1) 코드 스플리팅 (Code Splitting)

번들 파일 크기가 너무 크면 로딩 속도가 느려지기 때문에, 코드를 여러 개의 번들로 나눌 수 있어요.

✔️ 예제: splitChunks 옵션 사용

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

➡️ 공통 모듈을 분리해서 별도의 파일로 만들어줘요!

✅ 2) Lazy Loading (지연 로딩)

필요한 순간에만 코드를 로드해서 속도를 최적화해요.

✔️ 예제: import() 사용

button.addEventListener('click', () => {
  import('./module.js').then((module) => {
    module.load();
  });
});

➡️ 버튼을 클릭할 때만 module.js를 로드해요.

✅ 3) Tree Shaking (안 쓰는 코드 제거)

사용하지 않는 JS 코드를 자동으로 제거해서 파일 크기를 줄여줘요.

✔️ 예제: mode: 'production' 설정

module.exports = {
  mode: 'production',
};

➡️ mode: 'production'을 설정하면 자동으로 적용돼요!

🎯 Webpack 정리!

개념 설명

Entry	번들링을 시작할 진입점 파일 (index.js 등)
Output	번들링된 결과 파일 (bundle.js)을 저장할 위치
Loaders	CSS, 이미지 등을 JS에서 사용할 수 있도록 변환
Plugins	기능 확장 (HTML 생성, 코드 압축 등)
Code Splitting	번들 크기를 줄이기 위해 코드 분리
Lazy Loading	필요한 순간에만 코드 로딩
Tree Shaking	안 쓰는 코드 제거

🔥 이제 Webpack이 왜 필요한지, 어떻게 동작하는지 이해됐죠?

🔥 React, Vue 같은 프레임워크에서 어떻게 활용되는지도 확실히 감 잡혔을 거예요! 😊

혹시 궁금한 거 있으면 편하게 물어봐요! 🚀