웹팩 기초

seul·2022년 7월 25일
0

FE

목록 보기
1/4

웹팩이란?

  • 현재 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 모듈 번들러(Module Bundler)이다.
  • 모듈 번들러란 웹 애플리케이션을 구성하는 HTML, CSS, JavaScript, image 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구를 의미한다.

모듈이란?

  • 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다.
  • 웹팩에서 지칭하는 모듈은 자바스크립트 모듈에만 국한된 것이 아닐, 웹 애플리케이션을 구성하는 모든 자원을 의미.

모듈 번들링이란?


그림과 같이 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작을 모듈 번들링이라고 한다.

Webpack의 필요성

  • 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해 필요하다.
    • 웹 페이지를 구성하는 코드의 양이 많으면(무거우면) 웹 페이지의 로딩 속도와 성능이 저하된다.
    • 일반적으로 하나의 웹사이트에 접근하는 순간부터 3초 이내에 페이지가 뜨지 않으면 이탈을 택하는 유저가 많다.
    • 로딩 속도를 개선하기 위한 노력으로 브라우저에서 서버로 요청하는 파일의 숫자를 줄이는 것이 있다.
    • 각 자원들을 일일이 서버에 요청할 필요없이 webpack을 통해서 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있어서 네트워크 코스트가 줄어든다.
  • 일부 브라우저에서 지원하지 않는 JavaScript ES6 문법 → ES5로 변환하는 babel-loader 사용할 수 있다.
  • 개발자가 선택하는 최선의 개발 방식으로 개발할 수 있게 지원- 웹 개발 작업 자동화 도구
  • Webpack4 버전 이상부터는 Develoment, Production 두 가지의 모드를 지원
    • Production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원하기도 한다. 상용화 된 프로그램을 사용자가 느끼기에 더욱 쾌적한 환경 및 보안까지 신경쓰면서 노출시킬 수 있다.

Webpack의 핵심 컨셉 4가지

1. Entry

  • 번들링을 원하는 파일 위치(다른 모듈을 사용하고 있는 최상위 자바스크립트 파일)
  • 웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일을 묶는다.

2. Output

  • 번들되 결과물을 내보낼 위치

3. Loader

  • JavaScript, JSON 파일이 아닌 다른 유형의 파일 처리
  • image, font, stylesheet 등의 파일을 웹팩이 이해할 수 있는 모듈로 변환시킨다.
    • test: 변환이 필요한 파일들을 식별하기 위한 속성(필수)
    • use: 변환을 수행하는데 사용되는 로더를 가리키는 속성(필수)
    • exclude: 바벨로 컴파일하지 않을 파일이나 폴더를 지정. (반대로 include 속성을 이용해 반드시 컴파일해야 할 파일이나 폴더 지정 가능)

4. Plugin

  • 로더로 설정하기 애매한 부분 등 광범위한 작업
  • 번들된 결과물을 처리
  • bundle optimization, asset management, injection of environment

참고

https://joshua1988.github.io/webpack-guide/getting-started.html#%EC%9B%B9%ED%8C%A9-%EB%A7%9B%EB%B3%B4%EA%B8%B0-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC

profile
Connecting dots

0개의 댓글