Webpack으로 정적 자원 관리하기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
개발 툴
대상자
- 대상자: JavaScript 및 Webpack 기초 지식을 가진 개발자
- 난이도: 중급 (Webpack 설정 및 자원 관리 기술 이해 필요)
핵심 요약
- Webpack 5 이후
file-loader/url-loader대체:asset/resource,asset/inline,asset타입으로 자원 처리 가능 - 자원 직접 임포트 예시:
```javascript
import logo from './images/logo.png';
```
- 캐시 최적화:
output.assetModuleFilename설정으로 해시 기반 파일명 생성
섹션별 세부 요약
1. 프로젝트 준비 조건
- Node.js, Webpack, Webpack CLI 설치 필수
npm install --save-dev webpack webpack-cli명령어로 설치- 기본 JavaScript 지식 필요
2. 이미지 및 글꼴 임포트 방법
- 이미지 임포트:
```javascript
import logo from './images/logo.png';
const img = document.createElement('img');
img.src = logo;
```
- 글꼴 임포트:
```javascript
import './fonts/roboto.woff2';
```
- SVG 내联 처리:
```javascript
test: /\.svg$/,
type: 'asset/inline'
```
3. 파일 유형별 처리 설정
- PDF 파일:
asset/resource타입 사용 - 이미지 파일:
asset/resource타입으로 자동 압축 및 경로 업데이트 - 캐시 관리:
```javascript
output: {
filename: '[name].[contenthash].js',
assetModuleFilename: 'assets/[hash][ext][query]'
}
```
4. Webpack의 자원 관리 장점
- 프로젝트 정리: 자동 리네임, 압축, 파일 배치 처리
- 성능 향상: 해시 기반 파일명으로 캐시 최적화
- 확장성: PDF, SVG 등 다양한 자원 유형 지원
결론
- 실무 팁: 로고 등 간단한 자원부터 시작해
asset타입 설정을 확장 - 예시:
asset/inline으로 SVG 내联 처리,asset/resource로 PDF 다운로드용 파일 생성 - Webpack 5 활용:
file-loader/url-loader대체로 개발 편의성 극대화