Search
πŸ“¦

Webpack & Module Bundler

πŸ§‘πŸΌβ€πŸš€ Webpack을 μ•Œμ•„μ•Ό ν•˜λŠ” 이유

β—ν¬λ‘œμŠ€ λΈŒλΌμš°μ§• 문제λ₯Ό ν•΄κ²°ν•˜κ³  μ‹Άλ‹€λ©΄ β—ν΄λΌμ΄μ–ΈνŠΈ μž‘μ—… λ¦¬μ†ŒμŠ€λ₯Ό 보닀 효율적으둜 λ°°ν¬ν•˜κ³  μ‹Άλ‹€λ©΄

πŸ™‹πŸ»β€β™‚οΈ 이 λ¬Έμ„œλ₯Ό 보고 λ‚˜λ©΄

Webpack이 ν•΄κ²°ν•˜λ €λŠ” 문제λ₯Ό μ•Œ 수 μžˆλ‹€.
μ™œ Module Bundlerκ°€ λ“±μž₯ν•˜κ²Œ λ˜μ—ˆλŠ”μ§€ κ·Έ 배경을 μ•Œ 수 μžˆλ‹€.

Webpack & Module Bundler

였랜 μ‹œκ°„ λ™μ•ˆ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λΉŒλ“œκ°€ ν•„μš” μ—†λŠ” μ–Έμ–΄λ‘œ μ•Œλ €μ‘ŒμŠ΅λ‹ˆλ‹€. 사싀 λΉŒλ“œλΌλŠ” 것 μžμ²΄κ°€ μ»΄νŒŒμΌμ„ ν¬ν•¨ν•œλ‹€λŠ” μ „μ œκ°€ μžˆλŠ”κ²Œ μΌλ°˜μ μ΄λ―€λ‘œ, 컴파일이 ν•„μš” μ—†λŠ” 슀크립트 언어듀은 λΉŒλ“œ 과정이 μ—†λŠ” 것이 μΌλ°˜μ μ΄μ—ˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 규λͺ¨κ°€ 컀지고 λ³΅μž‘ν•΄μ§€λ©΄μ„œ μžμ—°μŠ€λŸ½κ²Œ λͺ¨λ“ˆ μ‹œμŠ€ν…œμ˜ ν•„μš”μ„±μ΄ λŒ€λ‘λ˜μ—ˆμŠ΅λ‹ˆλ‹€. 사싀 μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ λͺ¨λ“ˆ μ‹œμŠ€ν…œμ€ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 탄생 이후 μ•½ 10λ…„ λ™μ•ˆ μ œλŒ€λ‘œ κ³ λ €λ˜μ§€ μ•Šμ€ κ°œλ…μ΄μ—ˆμŠ΅λ‹ˆλ‹€. ν˜„μž¬λŠ” ES6 μ΄ν›„λ‘œ λͺ¨λ“ˆ μ‹œμŠ€ν…œμ΄ κ³΅μ‹μ μœΌλ‘œ 제곡되고 있고, 보닀 λ‚˜μ€ λͺ¨λ“ˆ μ‹œμŠ€ν…œμ„ κ΄€λ¦¬ν•˜κΈ° μœ„ν•œ 도ꡬ듀 λ˜ν•œ ν™•μž₯λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
Webpack은 ν”„λ‘ νŠΈμ—”λ“œ ν”„λ ˆμž„μ›Œν¬μ—μ„œ 많이 μ‚¬μš©λ˜λŠ” Module Bundlerμž…λ‹ˆλ‹€. Webpack은 의쑴 관계λ₯Ό 가지고 μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ, CSS, 이미지 λ“±μ˜ λ¦¬μ†ŒμŠ€λ“€μ„ ν•˜λ‚˜(λ˜λŠ” μ—¬λŸ¬ 개)의 파일둜 λ²ˆλ“€λ§ν•˜κ²Œ λ„μ™€μ€λ‹ˆλ‹€.

Webpack이 ν•΄κ²°ν•˜λ €λŠ” 문제

1) μžλ°”μŠ€ν¬λ¦½νŠΈ μŠ€μ½”ν”„

기본적으둜 μ—¬λŸ¬κ°œμ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ—μ„œ μ„ μ–Έλœ λ³€μˆ˜μ™€ ν•¨μˆ˜λ“€μ˜ μŠ€μ½”ν”„λŠ” μ „μ—­μ μœΌλ‘œ μ„€μ •λ©λ‹ˆλ‹€. μ΄λŠ” 접근이 μ–΄λ””μ„œλ‚˜ κ°€λŠ₯ν•˜λ‹€λŠ” μš©μ΄ν•¨μ΄ μžˆμ§€λ§Œ, 그만큼 λ³€μˆ˜μ˜ μΆ©λŒμ΄λ‚˜ λ‘œλ”© μˆœμ„œ 등에 μ·¨μ•½ν•˜λ‹€λŠ” μ—„μ²­λ‚œ 단점이 μžˆμŠ΅λ‹ˆλ‹€. Webpack은 이λ₯Ό λͺ¨λ“ˆμ΄λΌλŠ” λ‹¨μœ„λ‘œ 관리할 수 있게 λ„μ™€μ€λ‹ˆλ‹€.

2) λΈŒλΌμš°μ €λ³„ HTTP μš”μ²­ 숫자의 μ œμ•½

λΈŒλΌμš°μ €μ—μ„œ ν•œ λ²ˆμ— μ„œλ²„λ‘œ 보낼 수 μžˆλŠ” HTTP μš”μ²­ μˆ«μžλŠ” μ œμ•½λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. 보톡 크둬의 경우 ν•œ λ²ˆμ— 6개의 μš”μ²­μ„ ν•  수 μžˆλŠ”λ° Webpack을 톡해 λ²ˆλ“€λ§ ν•˜λ©΄ μš”μ²­ν•΄μ•Ό ν•˜λŠ” 파일의 수 λ˜ν•œ μ μ–΄μ§€λ―€λ‘œ 더 λΉ λ₯Έ μ„±λŠ₯ κ°œμ„ μ΄ κ°€λŠ₯ν•©λ‹ˆλ‹€.

3) Dynamic Loading & Lazy Loading

μ•žμ„œ SPA의 λ‹¨μ μœΌλ‘œ μ΄ˆκΈ°μ— ν•„μš”ν•˜μ§€ μ•Šμ€ νŽ˜μ΄μ§€μ— λŒ€ν•œ μŠ€ν¬λ¦½νŠΈλ“€λ„ λΆˆλŸ¬μ˜¨λ‹€λŠ” μ΄μ•ΌκΈ°ν–ˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ›ΉνŒ©μ„ ν†΅ν•œ λͺ¨λ“ˆ λ²ˆλ“€λ§μ„ μ΄μš©ν•˜λ©΄ λ™μ μœΌλ‘œ, ν•„μš”ν•œ νŽ˜μ΄μ§€μ— λ”°λ₯Έ 슀크립트 λͺ¨λ“ˆμ„ λ™μ μœΌλ‘œ λΆˆλŸ¬μ˜€λŠ” 것도 κ°€λŠ₯ν•©λ‹ˆλ‹€.

4) μ›Ή 개발 μž‘μ—… μžλ™ν™”

μ§€κΈˆμ€ live-server와 같은 도ꡬλ₯Ό μ΄μš©ν•˜μ—¬ μ†μ‰½κ²Œ μ½”λ“œμ˜ μˆ˜μ •μ„ λΈŒλΌμš°μ €μ—μ„œ μƒˆλ‘œ κ³ μΉ¨ ν•˜μ§€ μ•Šμ•„λ„ 확인할 수 μžˆμ§€λ§Œ, 이전에 ν”„λ‘ νŠΈμ—”λ“œ 개발 업무λ₯Ό ν•˜λ©° κ°€μž₯ 많이 λ°˜λ³΅ν•˜λŠ” 방법은 λΈŒλΌμš°μ €μ—μ„œμ˜ μƒˆλ‘œ κ³ μΉ¨μ΄μ—ˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ μ›Ή μ„œλΉ„μŠ€λ₯Ό κ°œλ°œν•˜κ³  μ›Ή μ„œλ²„μ— 배포할 λ•Œ μ•„λž˜μ™€ 같은 μž‘μ—…μ΄ ν•„μš”ν–ˆμŠ΅λ‹ˆλ‹€.
β€’
HTML, CSS, JS μ••μΆ•
β€’
이미지 μ••μΆ•
β€’
CSS μ „μ²˜λ¦¬κΈ° λ³€ν™˜
μ΄λŸ¬ν•œ 일듀을 μžλ™ν™” ν•΄μ£ΌλŠ” λ„κ΅¬λ‘œμ¨ Grunt, Gulp 등이 μžˆμŠ΅λ‹ˆλ‹€. 이 도ꡬ듀도 μ—¬μ „νžˆ μ‚¬μš©λ˜μ§€λ§Œ ν”„λ‘œμ νŠΈμ˜ 규λͺ¨μ™€ 이 λ„κ΅¬λ“€λ‘œμ¨λŠ” μ§„ν–‰ν•˜κΈ° μ–΄λ €μš΄ μ›ΉνŒ©λ§Œμ˜ 쒅속성 관리, Node.js ν™˜κ²½μ—μ„œμ˜ μ‚¬μš© λ“±μ˜ 이유둜 인해 μ›ΉνŒ©μ΄ 더 많이 μ‚¬μš©λ˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

πŸ“˜ 정리

β€’
Webpack은 μ˜μ‘΄κ΄€κ³„λ₯Ό 가지고 μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ, CSS, 이미지 λ“±μ˜ λ¦¬μ†ŒμŠ€λ“€μ„ ν•˜λ‚˜(λ˜λŠ” μ—¬λŸ¬ 개)의 파일둜 λ²ˆλ“€λ§ ν•˜κ²Œ 도와쀀닀.
β€’
Webpack을 ν†΅ν•˜μ—¬ μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌλ“€μ„ λͺ¨λ“ˆν™”ν•  수 있고, 이λ₯Ό λ²ˆλ“€λ§ ν•˜μ—¬ μžμ› μš”μ²­μ˜ 횟수λ₯Ό 쀄일 수 μžˆλ‹€.
β€’
Dynamic Loading & Lazy Loading을 ν†΅ν•˜μ—¬, μžμ›μ„ ν•„μš”ν•œ νŽ˜μ΄μ§€μ— 따라 λΆ„λ¦¬ν•˜κ³  μ΅œμ ν™”ν•  수 μžˆλ‹€.
β€’
기쑴의 μ›Ή 개발 μžλ™ν™” λ„κ΅¬λ“€μ˜ μž₯점을 ν‘μˆ˜ν•˜λ©° μ›Ή 개발 μž‘μ—…μ˜ μžλ™ν™”λ₯Ό κ°€λŠ₯ν•˜κ²Œ ν•œλ‹€.

πŸ”— μ°Έκ³  링크

β€’