• 웹팩이란

    • 최신 프론트앤드 프레임워크에서 가장 많이 사용되는 모듈 번들러

    • 웹팩에서 모듈이란 HTML, CSS, Javascript, Img, Font 등의 파일들을 말함

    • 즉, 웹팩은 모듈을 번들링 해주는 모듈 번들러

    • 모듈 번들링

      Untitled

      • 웹을 구성하는 많은 자원들을 하나의 파일로 병합 및 압축 해주는 동작

    • 번들러

      • javascript 파일을 활용할 때 사용되는 표현
      • 여러 개의 모듈화된 자바스크립트 파일을 하나의 자바스크립트 파일로 합치는 과정
  • 웹팩의 등장 배경
    • 자바스크립트 기준으로 변수 유효 범위는 기본적으로 전역으로 설정
    • 위 이유로 서로 다른 모듈에서 같은 변수 네이밍을 사용한다면 다른 모듈의 변수를 수정하는 경우도 생길 수 있음
    • 따라서 모듈화를 하면서도 파일 별로 변수를 관리하기 위한 방법으로 AMD, CommonJS 등의 라이브러리 사용
    • AMD 방식
      • RequireJs가 AMD 방식 중 가장 많이 사용됨
      • 콜백 함수를 통해 모듈들을 전달받는 구조
      • 따라서 모듈이 많아질수록 관리하기가 어려움
    • CommonJs 방식
      • Browserify가 CommonJS 방식 중 가장 많이 사용됨
      • node.js로 코드를 작성하는 불편함으로 node.js를 다뤄야 하는 상황이 생김