• Home
  • About
    • 김연중 개발 블로그 🚀 photo

      김연중 개발 블로그 🚀

      개발과 나의 생각들

    • Learn More
    • Email
    • Github
  • Posts
    • All Posts
    • All Tags
  • 개발일기
  • 나의 생각
  • C#
  • ASP.net
  • DataBase
  • CS지식
  • 성장일기
  • JavaScript

[CS지식] 웹팩(Webpack)이란 무엇인가?

2022-10-09 20:14:09

Reading time ~2 minutes

📌 웹팩(Webpack)이란 무엇인가?



주제: 웹팩(Webpack)

웹팩이 뭐에요?

자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리.
모듈 번들러란, 웹 앱을 구성하는 리소스를 하나의 파일로 병합/압축 해주는 것.



이게 왜 생겨난거임?

1. 파일 단위의 JS관리 필요성이 요구됐다.

어떤 한 웹 페이지에 대해 여러 JS파일이 관여하게 되면서 변수를 중복선언하거나 의도치 않은 값 할당이 문제가 됨.
웹팩 전에는 이를 common.js나 AMD와 같은 라이브러리를 사용하여 문제를 해결하였다.


2. 웹 개발 작업 자동화 도구가 필요했다.

웹 개발을 진행하다보면 배포할 때 다음과 같은 작업들이 요구되었다.

  • HTML, CSS, JS 압축
  • 이미지 압축
  • CSS 전처리기 변환 위와 같은 작업들에 대한 자동화가 필요했었고 웹팩 전에는 Grunt나 Gulp와 같은 도구들을 사용했었다.


3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능이 요구되었다.

페이지의 로딩을 줄이는 것은 웹 서비스 사용자를 더 많이 유치하기 위한 방법이였기 때문에 빠른 로딩 속도와 높은 성능을 위해 많은 시도가 있었다.

대표적인 방법으로는 서버로 요청하는 파일 수를 줄이는 것이였고, 위에서 말한 압축 및 병합, 레이지 로딩 기법 등 여러 방법이 등장함.

웹팩의 기본 철학은 다음과 같다.
“기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자”



그럼 정리하자면 웹팩이 해결할 수 있는 것은?

1. 자바스크립트 변수 유효 범위 문제 ES6의 Modules문법과 모듈 번들링을 통하여 변수 유효 범위 문제를 해결함


2. 브라우저별 HTTP 요청 숫자의 제약 각각의 브라우저는 최대 HTTP 요청 수 제약을 가지고 있다.(현재는 대부분 6)
서버로 보낼 수 있는 HTTP 요청 수가 제약되어 있기 때문에 요청 수를 줄이는 것이 웹 어플리케이션의 성능이나 속도에서 이점을 가질 수 있다. |브라우저|최대 연결 횟수| |——|——| |익스플로러 7|2| |익스플로러 8 ~ 9|6| |익스플로러 10, 11 |8, 13| |크롬|6| |사파리|6| |파이어폭스|6| |오페라|6| |안드로이드, IOS|6|


3. Dynamic Loading & Lazy Loading 미지원 기존에는 Require.js와 같은 라이브러리를 쓰지 않으면 동적으로 원하는 순간에 모듈을 로딩하는 것이 불가능했다.
그러나 웹팩에서는 Code Splitting 기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있게 되었다.



웹팩의 4가지 속성

웹팩의 빌드(파일 변환) 과정을 이해하기 위해 알아야할 아래 4가지 주요 속성이 있다.

  • entry
  • output
  • loader
  • plugin



1. entry Entry에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 한다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들로 구성되야 한다.


2. output 번들링 결과물을 저장할 경로이다. 최상위 output 키는 웹팩으로 번들링하거나 로드하는 번들, assets 그리고 다른 것들을 어떻게, 어디에 내보내야 하는지 설정하는 옵션들을 가지고 있습니다.


3. loader 웹팩은 JS 파일과 IMG 파일 등 모두 모듈로 인식하게 되는데, 이는 웹팩의 로더의 역할이다. 로더는 TS 같은 다른 언어를 JS 문법으로 변환해 주거나 이미지를 data URL형식의 문자열로 변환한다. 또한, CSS 파일을 JS 에서 직접 로딩할 수 있도록 해준다.


4. plugin 로더가 파일단위로 처리한다면, 플러그인은 번들된 결과물을 처리한다..
번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.





출처

https://kayuse88.github.io/database-logic/
https://gmlwjd9405.github.io/2019/02/01/orm.html
https://ko.wikipedia.org/wiki/%EC%A0%80%EC%9E%A5_%ED%94%84%EB%A1%9C%EC%8B%9C%EC%A0%80


Share Tweet +1