모듈 번들러 feat. webpack, vite

1. 🧐 모듈 번들러?

💡 모듈 번들러(Module Bundler)는 여러 개의 자바스크립트 파일과 그 외의 리소스(스타일시트, 이미지 등)를 하나 또는 여러 개의 번들 파일로 묶어주는 도구

❗ 모듈 번들러를 통해 웹 애플리케이션의 성능을 최적화

❗ 코드 관리 용이

2. 모듈 번들러가 필요한 이유?

1. 모듈 관리:

   현대 웹 애플리케이션은 수많은 모듈과 파일로 구성됨

   모듈 번들러는 이러한 모듈을 효율적으로 관리하고, 의존성을 자동으로 처리해준다는 장점 O

2. 성능 최적화:

   번들링을 통해 파일 수를 줄이고, 코드 스플리팅(Code Splitting) 등을 통해 초기 로딩 속도 개선 가능

3. 개발 편의성:

   핫 모듈 리플레이스먼트(Hot Module Replacement)와 같은 기능을 통해 개발 중 실시간으로 변경사항을 반영할 수 있어 개발 효율 향상

4. 리소스 처리:

5. CSS, 이미지, 폰트 등 다양한 리소스를 자바스크립트와 함께 처리하고 최적화 가능

---

2. Vite vs Webpack?

1. Webpack

💡 Webpack은 현재 가장 널리 사용되는 모듈 번들러 중 하나로, 복잡한 애플리케이션의 빌드 과정을 효율적으로 관리할 수 있게 해줌

❗ 다양한 플러그인과 로더(Loader)를 통해 확장성 very good!

❗ 거의 모든 프레임워크와 호환 가능

❗ but, 세팅해야 할 것이 많다는 단점 존재

코드 예시

기본 Webpack 설정 (webpack.config.js)

const path = require('path');

module.exports = {
  entry: './src/index.js', // 진입점
  output: {
    filename: 'bundle.js', // 번들 파일 이름
    path: path.resolve(__dirname, 'dist'), // 출력 디렉토리
  },
  module: {
    rules: [
      {
        test: /\\.css$/, // .css 파일을 처리
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\\.(png|jpg|gif)$/, // 이미지 파일을 처리
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 개발 서버의 콘텐츠 베이스
    compress: true,
    port: 9000, // 포트 번호
    hot: true, // 핫 모듈 리플레이스먼트 활성화
  },
};

패키지 설치 명령어

npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader file-loader

장점

1. 강력한 기능과 유연성: 다양한 플러그인과 로더를 통해 거의 모든 요구사항을 충족 가능
2. 광범위한 커뮤니티와 생태계: 방대한 문서와 커뮤니티 지원으로 문제 해결이 용이
3. 코드 스플리팅 지원: 필요할 때만 로드되는 동적 번들링을 지원하여 초기 로딩 속도 개선
4. 광범위한 프레임워크 지원: React, Vue, Angular 등 다양한 프레임워크와 호환

단점

1. 복잡한 설정: 기본 설정이 복잡할 수 있고, 초보자에게는 진입 장벽이 높을 수 있음
2. 빌드 속도: 대규모 프로젝트에서는 빌드 시간이 오래 걸릴 수 있음
3. 설정 파일의 크기: 다양한 기능을 사용하다 보면 설정 파일이 매우 커질 수 있음

---

2. Vite

💡 Vite는 현대적인 프론트엔드 개발을 위해 설계된 빌드 도구로, 빠른 개발 서버 시작과 모듈 핫 리로딩이 특징

❗ 기본적으로 ES 모듈을 사용하여 빌드 속도를 획기적으로 개선

❗ 설정이 간단하여 개발자가 쉽게 사용 가능

코드 예시

기본 Vite 설정 (vite.config.js)

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()], // Vue 플러그인 추가
  server: {
    port: 3000, // 개발 서버 포트
    open: true, // 서버 시작 시 브라우저 열기
  },
});

패키지 설치 명령어

npm init @vitejs/app my-vite-app --template vue
cd my-vite-app
npm install
npm run dev

장점

1. 초고속 개발 서버: 모듈을 필요할 때만 로드하여 개발 서버 시작과 핫 리로딩 속도가 매우 빠름
2. 간단한 설정: 기본 설정이 간단하고, 최소한의 설정으로도 강력한 기능 사용 가능
3. 최신 기술 지원: ES 모듈, 최신 자바스크립트 기능 등을 기본적으로 지원
4. 경량화된 번들러: 기본적으로 Rollup을 사용하여 프로덕션 빌드 시 최적화된 번들을 생성
5. 광범위한 프레임워크 지원: Vue, React, Svelte 등 다양한 프레임워크와 쉽게 통합 가능

단점

1. 플러그인 생태계: Webpack에 비해 플러그인 생태계가 아직 작음
2. 레거시 브라우저 지원: ES 모듈을 기본으로 하기 때문에 일부 레거시 브라우저에서는 추가 설정이 필요
3. 커스텀 설정의 제한: Webpack만큼 세밀한 설정이 필요할 경우 제한적

---

예시 비교

1. Webpack을 사용한 간단한 React 프로젝트 설정

1. 패키지 설치

   npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin
   npm install react react-dom

2. Webpack 설정 (webpack.config.js)

   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     entry: './src/index.jsx',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js',
     },
     module: {
       rules: [
         {
           test: /\\.(js|jsx)$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env', '@babel/preset-react'],
             },
           },
         },
         {
           test: /\\.css$/,
           use: ['style-loader', 'css-loader'],
         },
       ],
     },
     resolve: {
       extensions: ['.js', '.jsx'],
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: './public/index.html',
       }),
     ],
     devServer: {
       contentBase: path.join(__dirname, 'dist'),
       compress: true,
       port: 3000,
       hot: true,
     },
   };
   

3. Babel 설정 (.babelrc)

   {
     "presets": ["@babel/preset-env", "@babel/preset-react"]
   }

4. 스크립트 추가 (package.json)

   "scripts": {
     "start": "webpack serve --mode development",
     "build": "webpack --mode production"
   }

2.Vite를 사용한 간단한 React 프로젝트 설정

1. 프로젝트 생성 및 패키지 설치

   npm init @vitejs/app my-vite-app --template react
   cd my-vite-app
   npm install
   npm run dev

2. 기본 파일 구조
   Vite는 기본적으로 React 템플릿을 제공하며, 별도의 복잡한 설정 없이 바로 개발을 시작할 수 있음

3. 추가 설정 없이 사용 가능
   필요한 경우 vite.config.js 파일을 생성하여 추가 설정을 할 수 있음

---

Vite와 Webpack 비교 표

항목	Webpack	Vite
개발 서버 속도	느림	매우 빠름
설정 복잡성	복잡하고 방대함	간단하고 직관적
핫 모듈 리플레이스먼트	느릴 수 있음	매우 빠르고 효율적
번들링 도구	자체 번들링 시스템	Rollup 기반의 프로덕션 번들링
플러그인 생태계	매우 광범위하고 다양함	성장 중, 점차 확장됨
최신 기술 지원	설정을 통해 가능	기본적으로 지원
사용 용이성	초보자에게는 설정이 어려울 수 있음	설정이 간단하여 빠르게 시작 가능
레거시 브라우저 지원	다양한 레거시 브라우저와 호환성 제공	ES 모듈 기반으로 일부 제한적
초기 설정 시간	오래 걸릴 수 있음	매우 짧음
빌드 속도	대규모 프로젝트에서 느림	빠름
커스텀 설정의 유연성	매우 높음	상대적으로 제한적

---

결론

• Webpack은 강력한 기능과 유연성을 제공하며, 대규모 프로젝트나 복잡한 설정이 필요한 경우에 적합하지만 설정이 복잡하고 빌드 속도가 느릴 수 있어, 초보자에게는 다소 어려울 수 있음
• Vite는 초고속 개발 서버와 간단한 설정을 제공하여, 빠르게 프로젝트를 시작하고 개발 효율을 높이고자 하는 경우에 이상적. 최신 기술을 기본적으로 지원하지만, 플러그인 생태계가 Webpack에 비해 아직 성장 중.

사용하면 좋을 경우

• Webpack:
  • 대규모 프로젝트
  • 복잡한 설정과 커스텀 빌드 과정이 필요한 경우
  • 다양한 플러그인과 로더가 필요한 경우
• Vite:
  • 빠른 개발 속도가 중요한 프로젝트
  • 간단한 설정으로 빠르게 시작하고 싶은 경우
  • 최신 프론트엔드 기술(React, Vue 등)을 사용하는 프로젝트