webpack VS parcel

JIHahnSolΒ·2019λ…„ 7μ›” 14일
1
post-thumbnail

βœ”οΈ 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(μ„€μ • 파일 μ—†λŠ” λΉŒλ“œ)κ°€ κ°€λŠ₯ν•œ λ²„μ „μœΌλ‘œ μ—…κ·Έλ ˆμ΄λ“œ λ˜μ—ˆλ‹€κ³  ν•œλ‹€.
profile
Front-end Web Developer

3개의 λŒ“κΈ€

comment-user-thumbnail
2019λ…„ 7μ›” 14일

μ§€λ‹ˆκ°€ μ›ΉνŒ©μ„€μ •μ„ λ§Œλ“€μ–΄ 쀬으면 γ…‹γ…‹γ…‹γ…‹

1개의 λ‹΅κΈ€
comment-user-thumbnail
2019λ…„ 12μ›” 14일

μž…λ¬Έμžμž…λ‹ˆλ‹€.
Parcel μ‚¬μš©μ‹œ..

μœ„μ™€κ°™μ΄ κ΄„ν˜Έλ₯Ό ν•˜λ‚˜λ‘œ ν•˜λ©΄ λ™μž‘μ„ μ•ˆν•˜λ”λΌκ΅¬μš”..
</>
둜 ν•΄μ•Ό λ™μž‘ν•˜λŠ”..
ν™˜κ²½μ€ Vue.js μ‚¬μš© μ€‘μ΄μ—ˆμŠ΅λ‹ˆλ‹€.

λ‹΅κΈ€ 달기