웹팩(Webpack)

웹팩이란?

webpack은 JavaScript, CSS, Image 등의 웹 자원들을 묶어주는 모듈 번들러(Module Bundler)이다.

webpack은 여러 개의 파일과 모듈을 하나 또는 여러 개의 최적화된 파일로 번들링 해주는 역할을 한다.

 

 

모듈 번들링이란?

모듈 번들링은 웹 애플리케이션을 구성하는 여러 개의 파일과 모듈을 하나 또는 여러 개의 최종 파일로 결합하는 과정을 말한다.

 

 

웹팩의 등장 이유

1. 모듈화의 필요성

규모가 크고 복잡한 웹 애플리케이션에서는 코드 구조와 가독성을 개선하기 위해 작은 모듈로 분리가 필요하다.

이를 통해 모듈 간의 의존성이 명확해지고 개발 및 유지 보수가 용이해진다.

 

2. 개발 생산성 향상

webpack의 기능은 개발자들이 페이지를 새로고침하지 않아도 변경 사항을 실시간으로 확인할 수 있게 해 개발 생산성이 향상된다.

 

3. 성능 최적화

여러 개의 자원 파일을 하나의 번들로 만드는 것은 웹 애플리케이션의 로딩 속도를 개선할 수 있다.

 

웹팩의 필요성

1. JavaScript 변수 유효 범위

JavaScript의 변수는 선언된 범위와 변수 유형에 따라 유효 범위를 가진다.

이러한 범위는 변수가 사용되는 위치와 접근 가능한 영역을 결정짓는다.

webpack은 이러한 변수 유효 범위를 모듈 번들링으로 해결한다.

 

2. 브라우저별 HTTP 요청 숫자의 제약

브라우저별 동시 HTTP 요청 제한이 있다.

복잡한 웹 애플리케이션에는 코드 파일 수가 많아질 수 있는데, webpack을 사용하면 이를 합칠 수 있어 제약을 완화할 수 있다.

 

3. 사용하지 않는 코드의 관리

webpack은 트리 쉐이킹(Tree shaking) 기능을 사용해 사용하지 않는 코드를 제거할 수 있다.

 

4. Dynamic Loading & Lazy Loading 미지원

Dynamic Loading은 필요한 시점에 모듈을 동적으로 불러오는 것이고, Lazy Loading은 필요한 컴포넌트만 로딩하는 것을 말한다.

webpack은 두 기능을 지원하여 웹 애플리케이션의 초기 로딩 속도를 개선하고, 사용자 경험을 향상하는데 도움을 준다.

 

 

웹팩의 단점

1. 모듈 스코프

webpack은 모듈 스코프를 기반으로 한다.

이는 모든 파일에 대해 import, export 구문을 사용해야 한다는 것을 의미한다.

즉, 일부 유효한 코드 파일들을 webpack 번들링 파일로 포함하기 어렵게 만들 수 있다.

 

2. 시스템 리소스 사용

많은 로더와 플러그인을 사용하는 대규모 프로젝트의 경우, webpack 빌드 과정에서 많은 시스템 리소스가 사용될 수 있다.

이로 인해 빌드 시간이 늘어나거나 제한된 메모리 환경에서 문제가 발생할 수 있다.

 

3. 복잡한 설정

webpack의 설정 파일 구조와 다양한 옵션들은 난해할 수 있다.

러닝 커브가 있으며, 초기 설정에 시간과 노력이 필요하다.

 

 

Webpack.config

webpack의 설정 파일이다.

webpack.config는 프로젝트의 요구 사항에 따라 webpack의 동작 방식을 정의한다.

또한, 개발 및 프로덕션 환경에서 사용하는 로더(loader)와 플러그인(plugin)을 설정하는 데 사용한다.

 

'npx webpack --config webpack.config.js'로 실행한다.

파일명을 webpack.config.js인 약속된 이름으로 지정하였다면 'npx webpack'으로 실행 가능하다.

 

1. entry

프로젝트의 시작점을 지정한다.

webpack이 이 지점부터 시작하여 번들 파일을 생성한다.

 

2. output

생성된 번들 파일의 이름과 저장 위치를 지정한다.

 

3. mode 

개발 환경과 프로덕션 환경을 구분할 때 사용한다.

mode 속성은 'development', 'production', 'none' 중 하나의 값을 가진다.

 

4. module

프로젝트에서 사용되는 여러 파일 형식의 전처리 작업을 한다.

module 설정에서는 각각의 파일 형식에 대해 처리 방법을 정의하고, webpack 파일이 제대로 이해하고 변환할 수 있도록 도와준다.

 

5. loader

파일에 전처리를 수행할 수 있도록 하는 도구이다.

이를 통해 원본 코드를 다른 형태로 변경하거나 변환할 수 있다.

일반적으로 module 설정의 일부로 지정되고, 파일 유형별로 필요한 로더를 추가한다.

 

6. plugins

프로젝트의 번들링 및 최적화 과정에서 사용되는 플러그인을 추가한다.

loader에 비해 자유롭다.