๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
728x90

webpack1

Rollup vs. Webpack: ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ ๋น„๊ต Rollup vs. Webpack: ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ ๋น„๊ต 1. ์†Œ๊ฐœ 1.1 Rollup Rollup์€ ์ฃผ๋กœ ES6 ๋ชจ๋“ˆ์— ์ค‘์ ์„ ๋‘” JavaScript ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ์ž…๋‹ˆ๋‹ค. ES6 ๋ชจ๋“ˆ ํ‘œ์ค€์„ ๋”ฐ๋ฅด๊ณ  Tree-shaking๊ณผ ๊ฐ™์€ ์ตœ์ ํ™” ๊ธฐ๋Šฅ์„ ๊ฐ•์กฐํ•ฉ๋‹ˆ๋‹ค. ์ž‘์€ ๊ทœ๋ชจ์˜ ํ”„๋กœ์ ํŠธ ๋˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฒˆ๋“ค๋ง์— ํŠนํžˆ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค. 1.2 Webpack Webpack์€ ์ดˆ๊ธฐ์— ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ๋กœ ๋“ฑ์žฅํ•˜์—ฌ JavaScript๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ด๋ฏธ์ง€, CSS ๋“ฑ ๋‹ค์–‘ํ•œ ๋ฆฌ์†Œ์Šค๋“ค์„ ํšจ๊ณผ์ ์œผ๋กœ ๋ฒˆ๋“ค๋งํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ๋Œ€๊ทœ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ ๋ณต์žกํ•œ ํ”„๋กœ์ ํŠธ์— ์ ํ•ฉํ•œ ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ์ž…๋‹ˆ๋‹ค. 2. ์ฃผ์š” ์ฐจ์ด์  2.1 ๋ชจ๋“ˆ ํ˜•์‹ Rollup: ์ฃผ๋กœ ES6 ๋ชจ๋“ˆ์— ์ค‘์ ์„ ๋‘๋ฉฐ, ํ‘œ์ค€์„ ๋”ฐ๋ฅด๊ณ  Tree-shaking์„ ํ†ตํ•ด ๋ถˆํ•„์š”ํ•œ ์ฝ”๋“œ๋ฅผ.. 2024. 2. 21.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”