โœ”๏ธ webpack

๐Ÿพ WHY

HTML์—์„œ <script />๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ๋งŽ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ์‹คํ–‰ํ•  ๊ฒฝ์šฐ ์›น์•ฑ์— ๋ณ‘๋ชฉํ˜„์ƒ์ด ์ƒ๊ธฐ๊ฒŒ ๋œ๋‹ค. ์ด๋Ÿฌํ•œ ํ˜„์ƒ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ํ•˜๋‚˜์˜ ํฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์ด ํ•„์š”ํ•˜๋‹ค. ํ•˜์ง€๋งŒ ํ•œ ํŒŒ์ผ์— ๋ชจ๋“  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ๋„ฃ๊ฒŒ๋˜๋ฉด ํ๋ฆ„์„ ์ดํ•ดํ•˜๊ธฐ๋„ ํž˜๋“ค๊ณ , ๋ณต์žก๋„๊ฐ€ ์˜ฌ๋ผ๊ฐ€ ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ธฐ๋„ ํž˜๋“ค๋‹ค. ์ด๋•Œ webpack๊ณผ ๊ฐ™์€ ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ๋Š” ์—ฌ๋Ÿฌ ํŒŒ์ผ์„ ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ๋ฌถ์–ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์—, ๋„คํŠธ์›Œํฌ ๋ณ‘๋ชฉํ˜„์ƒ์„ ์ตœ์†Œํ™” ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿพ HOW TO

  1. webpack์˜ ํ•ต์‹ฌ ๊ฐœ๋… : webpack.config.js ํŒŒ์ผ์—์„œ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • Entry : ์‹œ์ž‘์ ์œผ๋กœ, ์—ฌ๋Ÿฌ๊ฐœ์˜ entry๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • Output : ์ƒ์„ฑํ•œ ๋ฒˆ๋“ค์„ ์ €์žฅํ•  ์œ„์น˜๋ฅผ ์ง€์ • ํ•œ๋‹ค. ๊ธฐ๋ณธ๊ฐ’์€ ./dist/main.js ์ด๋‹ค.
  • Loader : webpack์ด ์ดํ•ด ํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“ˆ๋กœ ๋ณ€๊ฒฝํ•ด ์ฃผ๋Š” ์—ญํ• 
  • Plugins : ๋ฒˆ๋“ค๋œ ํŒŒ์ผ์„ ๋‚œ๋…ํ™” ํ•˜๊ฑฐ๋‚˜, ์••์ถ•ํ•˜๋Š”๋ฐ ์‚ฌ์šฉํ•œ๋‹ค.
  • mode
    • development
    • production
    • none

โœ”๏ธ parcel

๐Ÿพ HOW TO

webpack๊ณผ ๋‹ค๋ฅด๊ฒŒ ๋ณ„๋‹ค๋ฅธ ์„ค์ •์—†์ด ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

  1. ์„ค์น˜ ํ›„, ๋ฒˆ๋“ค๋งํ•˜๊ณ ์žํ•˜๋Š” ์ง„์ž…ํŒŒ์ผ(entry)์„ ์„ค์ •ํ•˜๋ฉด ๋œ๋‹ค.

    parcel index.html

    ๋งˆ๋ฌด๋ฆฌ

    ํ˜„์žฌ Webpack4 ๋กœ Zero-configuration(์„ค์ • ํŒŒ์ผ ์—†๋Š” ๋นŒ๋“œ)๊ฐ€ ๊ฐ€๋Šฅํ•œ ๋ฒ„์ „์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ ๋˜์—ˆ๋‹ค๊ณ  ํ•œ๋‹ค.