Webpack์ ๊ธฐ๋ณธ ๊ฐ๋ ๋ค์ ์์๋ณด์!
์ค์๊ฐ์ผ๋ก ๋ฆฌ๋ก๋๊ฐ ๋๋ ์นํฉ์ ๊ฐ๋ฐ ์๋ฒํ์ผ์ ๋ณํ๋ฅผ ๊ฐ์งํ์ ๋ ๋ค์ ๋น๋๋ฅผ ์คํํ๋ watch๋ผ๋ ์ต์ ์ด ์ ์ฉ๋์ด ์์๋ผ์ด๋ธ ๋ฆฌ๋ก๋ฉ ํ๊ฒฝ ์ ๊ณตโ ์์ ์ฌํญ ๋ฐ์๋ ๋๋ง๋ค ๋น๋ + ๋ฆฌํ๋ ์ ์๋ ์ ์ฉdev-server๋ dist ํด๋์ ๊ด๊ณ์์ด ๋์โ ๋น๋ ๊ฒฐ๊ณผ๋ฌผ์ด
์ง์ํ๊ณ ์ ํ๋ ๋ธ๋ผ์ฐ์ ๋ค์ ๋ํ ์ค์ package.json์ ์ ์browserslist ๋ฌธ์์์ ๊ถ์ฅํ๋ ๋ฐฉ์.browserslistrc ํ์ผ์ ์ ์๋ธ๋ผ์ฐ์ ์ง์ ๋ฒ์์ ๋ํ ๊ฐ์ ์์ฑbrowserslist์ ๊ด๋ จ๋ ํ๋ฌ๊ทธ์ธ์ด ํด๋น ํ์ผ์ ์ฐธ์กฐํ์ฌ ์์ฑ๋ ๋ธ๋ผ์ฐ์ ๋ฒ
๋คํธ์ํฌ๋ฅผ ํตํด ์ ์ก๋๋ ๋ฆฌ์์ค๋ค์ ์์ด ์ปค์ง๋ฉด ์ฌ์ฉ์๋ค์๊ฒ ์ ๋ฌ๋๋ ์ปจํ ์ธ ๋ค์ ๋์ฐฉ์๊ฐ์ด ๊ธธ์ด์งโ ์ต์ข ์ ์ผ๋ก ์ฌ์ฉ์์๊ฒ ์ ๋ฌ๋๋ ๋ฆฌ์์ค๋ค์ ํํ๋ ๋ถํ์ํ ์์๋ค์ ์ ๊ฑฐํด์ค ์ต์ ํ๋ ์ํ๊ฐ ๋์ด ์์ด์ผ ํจ์ดํ๋ฆฌ์ผ์ด์ ์ด ๋์ํ๋ ๊ณผ์ ์ ๊ด์ฌํ์ง ์๋ ์์๋ค ์ ๊ฑฐ โ ์ฉ
๋ชจ๋์ ์ ๋ ฅ๋ฐ์ ์ฒ๋ฆฌํ๋ ๊ณผ์ ๊ณผ ๊ด๋ จ๋ ์์ฑ์นํฉ์ด ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ์์ฑ์ํค๋ ๊ณผ์ ์์ ์์กด ๊ด๊ณ๋ฅผ ๊ฐ๋ ๋ค์ํ ํ์ ์ ๋ชจ๋๋ค์ ์ ๋ ฅ๋ฐ๊ณ ์ฒ๋ฆฌํ๋ ์ญํ ๋ชจ๋์ ํด์ํ ๋ jsํ์ผ์ด๋ jsonํ์ผ์ ๊ธฐ๋ณธ ๋ชจ๋๋ก ๋ด๋ง์ฝ ๋ค๋ฅธ ํ์ผ์ ๋ชจ๋๋ก ๋ถ๋ฌ์์ ์ฌ์ฉํ๊ฒ ๋ ๊ฒฝ์ฐ, load
์นํฉ์ ๊ธฐ๋ณธ์ ์ธ ๋์์ ์ถ๊ฐ์ ์ธ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ์์ฑWebpack์ด ๋์ํ๋ ์ ์ฒด์ ์ธ ๊ณผ์ ์ ๊ฐ์ ๊ฐ๋ฅ, ๋ฒ๋ค๋ง์ ์ ์ฒด์ ์ธ ๊ณผ์ ์ ์ฌ๋ฌ๊ฐ์ง ์ผ๋ค์ ํ ์ ์์bundle ํ์ผ์ ๋ณํ๋ฅผ ์ค๊ฐ๋ฐ ๋ชจ๋์์ ๊ฐ๋ฐ ํธ์์ฑ์ ์ ๊ณตproduction ๋ชจ๋์์ ์ฝ๋์ ์ต์ ํ๋ฅผ ์ ๊ณต์น
ํ๋์ ๋ฒ๋ค ํ์ผ์ ํจ๊ณผ์ ์ผ๋ก ๋ค๋ฃจ๊ธฐ ์ํด ์ฌ๋ฌ๊ฐ์ง์ ํ์ผ๋ก ๋ค์ ๋๋๋ ๊ฒ๋ฒ๋ค๋ง์ ํ๊ฒ ๋ ๊ฒฝ์ฐ, ์์ฑ๋๋ ๋ฒ๋คํ์ผ์ ์ฌ์ด์ฆ๊ฐ ์ ์ ๋์ด๋จ์ฅ์ : ํ์ผ์ ์์ฒญ์ ์ค์ด๋ฌ๋จ์ : ํ์ผ ํฌ๊ธฐ๊ฐ ์ปค์ ธ ์๋์ ์ผ๋ก ํ์ผ์ด ๋์ฐฉํ๋ ์๊ฐ์ด ์ง์ฐ๋จ โ Chunk!runtime ch
์ฌ์ฉ์๊ฐ ์๋น์ค๋ฅผ ์ด์ฉํ๊ธฐ ์ํด ๊ธฐ๋ค๋ฆฌ๋ ์๊ฐ์ ์ต์ํํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ๊ฒ์ฌ์ฉ์๊ฐ ํ์ํ ๋ฆฌ์์ค๋ค์ ๋ณต์ฌ๋ณธ์๋ฒ์ ์์ฒญํ๋ ํ์ ๊ฐ์โ ๋ฆฌ์์ค์ ๋ด์ฉ์ด ๋ณํ์ง ์๋๋ค๋ฉด ๊ฐ์ ๋ด์ฉ์ ์๋ฒ์ ์์ฒญํ ํ์ ์์โ ๋ฆฌ์์ค ๋ณต์ฌ๋ณธ์ ๋ง๋ค์ด ์๋ฒ๋ณด๋ค ๋ ๊ฐ๊น์ด ์์น์ ๋๊ณ ์ด ๋ณต
ํ๋ก๊ทธ๋จ์ ๊ตฌ์ฑํ๋ ๋ด๋ถ์ ์ฝ๋๊ฐ ๊ธฐ๋ฅ๋ณ๋ก ๋๋์ด์ ธ ์๋ ํํ๋ด์ฅ๋์ด ์๋ ์ฝ์ด ๋ชจ๋ (Built-in Core Module)ex. Node.js Module์ require('path')์ปค๋ฎค๋ํฐ ๊ธฐ๋ฐ์ ๋ชจ๋ (Community-based Module)ex. NPM \
์ต์ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ(Module Bundler)๋ชจ๋ ๋ฒ๋ค๋ฌ: ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ฑํ๋ ์์(HTML, CSS, Javscript, Images ๋ฑ)์ ๋ชจ๋ ๊ฐ๊ฐ์ ๋ชจ๋๋ก ๋ณด๊ณ ์ด๋ฅผ ์กฐํฉํด์ ๋ณํฉ๋ ํ๋์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋๋ ๋๊ตฌ