JS 번들링의 개념
번들링의 목표: 많은 수의 개별 JavaScript 파일을 하나의 파일로 병합함으로써, 브라우저가 처리해야 할 HTTP 요청 수를 줄이는 것입니다.
현대 웹의 요구: 현대 웹 애플리케이션은 수백, 수천 개의 파일을 가져올 수 있으며, 이를 각각 요청하면 성능이 저하됩니다. 번들링을 통해 이를 해결합니다.
JS 번들링의 원리
1. 모든 의존성 관계를 그래프로 구성합니다.
예: index.js가 module1.js를 가져오고, module1.js가 또 다른 module2.js를 가져오는 식으로 연결
2. 번들러는 모든 모듈을 탐색하여 특정 형식으로 변환한 뒤 병합합니다.
CommonJS, ES Modules 등 다양한 모듈 시스템을 하나로 통합.
트랜스파일링(Babel 등)을 통해 최신 문법을 오래된 브라우저에서도 동작할 수 있도록 변환.
3. 최적화
Dead Code Elimination: 사용하지 않는 코드를 제거합니다.
Tree Shaking: ES6 모듈에서 실제로 사용되지 않는 부분을 제거.
코드 압축(Uglify/Minify): 불필요한 공백, 주석 제거 및 변수 이름 축약.
코드 스플리팅: 한꺼번에 로드되지 않아도 되는 코드는 별도 번들로 분리.
번들러의 동작 원리를 예로 이해
// index.js
import { greet } from './greeting.js';
greet('world');
// greeting.js
export function greet(name) {
console.log(`Hello, ${name}!`);
}위 코드를 번들링하면:
index.js가 greeting.js를 가져오므로, 번들러는 이 둘을 하나로 병합.
불필요한 코드는 제거되고, 실제 사용하는 코드만 포함.
최적화 후 결과물은 압축된 하나의 파일.
웹팩이 뭐길래 사람들은 웹팩 웹팩 거릴까?
웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.
모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을
모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
🔎 그럼 여기서 모듈이란 어떤걸까?
모듈이란 프로그래밍 관점에서 특정 기능을 갖는 자원,변수,함수,상태 등을 말한다.
그렇게 수 많은 모듈이 모여 이걸 모듈 번들링 이라고 한다.
웹 어플리케이션을 구성하는 몇십,몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 함.
웹팩이 등장한 이유
웹팩이 등장한 이유는 크게 2가지 이다.
-
파일 단위의 자바스크립트 모듈 관리의 필요성
여러개의 JS파일이 연결 되었을 때 로드 순서에 억메이지 않기 위해 하나로 합쳐줌 -
웹 개발 작업 자동화 도구 (Web Task Manager)
- HTML, CSS, JS 압축
- 이미지 압축
- CSS 전처리기 변환
🔎 그럼 웹팩이 해결하고자 하는 건 뭘까?
- 자바스크립트 변수 유효 범위
- 사용하지 않는 코드의 관리
- Dynamic Loading & Lazy Loading 미지원
- 1번의 문제점을 ES6의 modules 문법과 모듈 번들링으로 해결
웹팩의 5가지 주요 속성
웹팩의 빌드(파일 변환) 과정을 이해하기 위해서는 4가지 주요 속성에 대해서 알고 있어야 한다.
- entry
- output
- loader
- plugin
- mode
Entry
entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 작성된 JS파일들의 경로이다.
예시)
module.exports = {
entry: './src/index.js'
}
// 위 코드는 웹팩을 실행했을 때 src 폴더 밑의 index.js 을 대상으로 웹팩이 빌드를 수행하는 코드이다.🔎 Entry 파일에는 어떤 내용이 들어가야 하나?
entry 속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 한다
웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문이다.
💡엔트리 포인트는 여러개가 될 수도 있다.
✔️ 한줄요약 : Entry 속성은 웹팩을 실행할 대상 파일. 진입점
Output
output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미한다.
예시)
module.exports = {
output: {
filename: 'bundle.js'
}
}
앞에서 배운 entry 속성과는 다르게 객체 형태로 옵션들을 추가해야 한다.
최소한 filename은 지정해줘야 하며 일반적으로 아래와 같이 path 속성을 함께 정의
var path = require('path');
module.exports = {
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
}
}
// output: './dist/bundle.js'filename 속성은 웹팩으로 빌드한 파일의 이름을 의미하고, path 속성은 해당 결과 파일의 경로를 의미
loader
로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌
웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성이다.
Loader 속성은 CSS, 이미지와 같은 비 자바스크립트 파일을 웹팩이 인식할 수 있게 추가하는 속성.
💡로더는 오른쪽에서 왼쪽 순으로 적용
mode
웹팩 버전 4부터 mode라는 개념이 추가되었다.
예시)
module.exports = {
mode: 'none',
entry: '',
// ...
}웹팩 설정을 정의할 때 위와 같이 mode라는 속성을 정의하면 웹팩의 실행 모드가 설정되는데,
다음 3가지 모드가 있다,
- none : 모드 설정 안함
- development : 개발 모드
- production : 배포 모드
각 실행 모드에 따라 웹팩의 결과물 모습이 달라집니다.
개발 모드인 경우에는 개발자들이 좀 더 보기 편하게 웹팩 로그나 결과물이 보여지고,
배포 모드인 경우에는 성능 최적화를 위해 기본적인 파일 압축 등의 빌드 과정이 추가된다.
추가예시)
module.exports = (env) => {
let entryPath = env.mode === 'production'
? './public/index.js'
: './src/index.js';
return {
entry: entryPath,
output: {},
// ...
}
}
// package.json
{
"build": "webpack",
"development": "npm run build --env mode=development",
"production": "npm run build --env mode=production"
}