wep pack & Bundling

김내현·2024년 11월 15일

개인공부

목록 보기
19/51

웹팩(Webpack)과 번들링(Bundling)에 대해 간단히 설명해 드리겠습니다:

  1. 번들링(Bundling):

    • 번들링은 여러 개의 파일을 하나로 묶는 작업을 말합니다[1][3].
    • 웹 애플리케이션을 구성하는 HTML, CSS, JavaScript 등 여러 모듈을 하나의 파일로 합치는 과정입니다[2][3].
    • 목적: 네트워크 요청 횟수를 줄이고, 파일 크기를 최적화하여 웹 성능을 향상시킵니다[1][3].
  2. 웹팩(Webpack):

    • 웹팩은 가장 널리 사용되는 모듈 번들러입니다[3][4].
    • 주요 기능:
      a) 모듈 의존성 분석 및 번들링
      b) 코드 최적화 및 압축
      c) 다양한 유형의 파일(JS, CSS, 이미지 등) 처리[1][4]
    • 장점:
      a) 모듈 단위의 코드 작성 가능
      b) 네트워크 병목 현상 완화
      c) 웹 개발 작업 자동화[3]
  3. 웹팩의 주요 구성 요소:

    • Entry: 번들링 시작점 설정
    • Output: 번들링 결과물 설정
    • Loaders: 다양한 유형의 파일 처리 (예: Babel 로더로 최신 JS를 구버전으로 변환)
    • Plugins: 번들링 프로세스 최적화 및 자동화[5]
  4. 웹팩 사용 이유:

    • 복잡한 의존성 관리
    • 코드 분할 및 최적화
    • 개발 환경 개선 (예: 개발 서버, 핫 리로딩)
    • 다양한 자원(CSS, 이미지 등)의 통합 관리[1][4][5]

웹팩은 현대 웹 개발에서 필수적인 도구로, 복잡한 프론트엔드 프로젝트를 효율적으로 관리하고 최적화하는 데 큰 도움을 줍니다.

Citations:
[1] https://steemit.com/javascript/@noreco/webpack
[2] https://velog.io/@zer0jun/%EB%B2%88%EB%93%A4%EB%A7%81%EA%B3%BC-%EC%9B%B9%ED%8C%A9
[3] https://mari-mo.tistory.com/202
[4] https://velog.io/@ddhhss0603/%EB%B2%88%EB%93%A4%EB%A7%81-%EB%B2%88%EB%93%A4%EB%A7%81%EA%B3%BC-%EC%9B%B9%ED%8C%A9
[5] https://strap.tistory.com/entry/%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80-%EB%B9%8C%EB%93%9C%EA%B3%BC%EC%A0%95
[6] https://r0k.wiki/posts/javascript/webpack/
[7] https://humanwater.tistory.com/2

0개의 댓글