웹팩의 역할과 필요성
1. 웹팩이란?
1) 정의 및 목적
웹팩(Webpack)은 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다.
여러 개의 파일들을 하나로 묶어주고, 프로젝트의 의존성 관리 및 번들링을 수행하여 최적화된 정적 자원을 생성한다.
💡 정적 모듈 번들러
여러 개별적인 모듈이나 파일들을 하나로 묶어주는 도구로, 주로 JavaScript파일, CSS, 이미지, 폰트 등 다양한 유형의 리소스를 포함하는 프로젝트를 관리하고 최적화하는데 사용된다.
2. 필요성과 장점
1) 모듈 시스템
현대의 웹 개발에서는 모듈 시스템이 필수적이며, 웹팩은 CommonJS, AMD, ES6 등 다양한 모듈 시스템을 지원하여 모듈화된 개발을 가능케 한다.
2) 번들링
여러 파일을 번들로 묶어 파일 요청 수를 줄이고, 네트워크 성능을 향상시킨다.
3) 로더와 플러그인
다양한 로더와 플러그인을 통해 CSS, 이미지, Babel과 같은 다양한 리소스를 처리하고 확장 가능한 빌드프로세스를 구성할 수 있다.
4) HMR(Hot Module Replacement)
개발 중인 애플리케이션의 수정 사항을 실시간으로 반영하여 빠른 개발 환경을 제공한다.
5) 코드 스플리팅
애플리케이션을 더 작은 청크(chunk)로 분할하여 초기 로딩 속도를 향상시키고 필요한 시점에 동적으로 로딩할 수 있다.
6) 생태계
풍부한 로더와 플러그인을 포함한 웹팩의 생태계는 커뮤니티에의해 지속적으로 발전하고 있다.
모듈 번들링의 개념
1. 모듈 시스템의 필요성
1) 문제점
예전에는 <script> 태그를 통해 스크립트를 불러오는 방식을 주로 사용하였으나, 이는 전역 스코프 문제와 의존성 관리의 어려움을 야기했다.
2) 모듈 시스템의 등장
CommonJS, AMD, ES6 모듈 등의 도입으로 코드를 모듈로 나눈어 작성할 수 있게 되었고, 이는 코드의 가독성과 재사용성을 높였다.
2. 모듈 번들링
1) 정의
프로젝트의 모든 리소스(JavaScript, CSS, 이미지등)을 모듈로 간주하고, 이를 하나의파일로 번들링하는 과정이다.
2) 장점
네트워크 요청을 최소화하여 로딩 속도를 향상시키고, 의존성을관리하여 유지보수성을 높인다.
3. 웹팩의 역할
1) 엔트리 포인트
웹팩은 엔트리 포인트(시작점)에서 의존성 그래프를 생성한다.
2) 의존성 해결
웹팩은 각 모듈의 의존성을 분석하고, 로더를 사용하여 다양한 형태의 모듈을 변환한다.
3) 번들 생성
최종적으로 웹팩은 의존성 그래프를 기반으로 번들을 생성하고, 이를 사용하여 애플리케이션을 실행한다
💡 의존성 그래프
웹팩이 모듈들 간의 의존성을 파악하고 효과적으로 관리하기 위해 만든 구조이다.
의존성 그래프를 통해 웹팩은 모듈 간의 로딩 순서를 결정하고, 최종적으로 번들을 생성하여 애플리케이션을 실행할 수 있게 된다.//의존성 그래프 (예시) A / \ B C | | D E // A 모듈 엔트리 포인트, B,C 모듈에 의존성 있음 // B,C 모듈은 각각 D,E 모듈에 의존성이 있음
4. 예시 웹팩 설정 파일
// webpack.config.js
module.exports = {
entry: './src/index.js', // 엔트리 포인트 설정
output: {
filename: 'bundle.js', // 번들된 결과물의 이름 및 경로 설정
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'], // CSS 파일 로딩을 위한 로더 설정
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader'], // 이미지 파일 로딩을 위한 로더 설정
},
],
},
};