πŸ’» Webpack

waterglassesΒ·2022λ…„ 5μ›” 11일
0

TIL

λͺ©λ‘ 보기
24/50
post-thumbnail

이번 μ±•ν„°λŠ” μ›ΉνŒ©μ— λŒ€ν•΄ λ‹€λ£¨μ—ˆμŠ΅λ‹ˆλ‹€.
⚠️ μ •λ¦¬ν•œ λ‚΄μš©μ€ μ˜€νƒ€λ‚˜ 잘λͺ»λœ 정보가 μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. λŒ“κΈ€λ‘œ μ•Œλ €μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€.

πŸ“ƒ 였늘 κ³΅λΆ€ν•œ 것

webpack

μžλ°”μŠ€ν¬λ¦½νŠΈ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μœ„ν•œ 정적 λͺ¨λ“ˆ λ²ˆλ“€λŸ¬μ΄λ‹€. webpack이 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μ²˜λ¦¬ν•  λ•Œ, λ‚΄λΆ€μ μœΌλ‘œλŠ” ν”„λ‘œμ νŠΈμ— ν•„μš”ν•œ λͺ¨λ“  λͺ¨λ“ˆμ„ λ§€ν•‘ν•˜κ³  ν•˜λ‚˜ μ΄μƒμ˜ λ²ˆλ“€μ„ μƒμ„±ν•˜λŠ” λ””νŽœλ˜μ‹œ κ·Έλž˜ν”„λ₯Ό λ§Œλ“ λ‹€. webpack.config.js에 μ •μ˜ν•˜λ©΄ node.js의 κ°€μ Έμ˜€κΈ°, 내보내기λ₯Ό μ΄μš©ν•œλ‹€.

μ™œ μ›ΉνŒ©μ΄ λ“±μž₯ν–ˆμ„κΉŒ?

1. 파일 λ‹¨μœ„μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ λͺ¨λ“ˆ κ΄€λ¦¬μ˜ ν•„μš”μ„±

μ•„λž˜μ™€ 같이 λ‘κ°œμ˜ 파일이 같은 λ³€μˆ˜λ‘œ μ„ μ–Έλ˜μ–΄ 있고 ν•˜λ‚˜μ˜ νŒŒμΌμ—μ„œ 두 μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ„ λ‘œλ”©ν•œλ‹€κ³  ν•œλ‹€λ©΄ 쀑볡 선언을 ν•˜κ²Œ λ˜μ–΄ μž¬ν• λ‹Ήλ˜κΈ° λ•Œλ¬Έμ— 파일 λ‹¨μœ„λ‘œ λ³€μˆ˜λ₯Ό 관리할 수 μ—†λ‹€.

// app.js
var num = 10;
function getNum() {
  console.log(num);
}

// main.js
var num = 20;
function getNum() {
  console.log(num);
}

이런 λ¬Έμ œμ μ—μ„œ 파일 λ‹¨μœ„λ‘œ λ³€μˆ˜λ₯Ό 관리할 수 μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ λͺ¨λ‘˜ν™”에 λŒ€ν•΄ ν•„μš”μ„±μ„ 느끼게 λ˜μ—ˆλ‹€.

2. μ›Ή 개발 μž‘μ—… μžλ™ν™” 도ꡬ
ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμ„ ν•  λ•Œ ν…μŠ€νŠΈ νŽΈμ§‘κΈ°μ—μ„œ μ½”λ“œλ₯Ό μˆ˜μ •ν•˜κ³  μ €μž₯ν•œ λ’€ λΈŒλΌμš°μ €μ—μ„œ μƒˆλ‘œκ³ μΉ¨ν•΄μ•Όλ§Œ 반영된 κ²°κ³Όλ₯Ό 확인할 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ μΌλ“€μ˜ μžλ™ν™”μ— λŒ€ν•œ ν•„μš”μ„±μ„ λŠκΌˆμŠ΅λ‹ˆλ‹€.

3. μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λΉ λ₯Έ λ‘œλ”© 속도와 높은 μ„±λŠ₯
μ›Ή μ‚¬μ΄νŠΈμ˜ λ‘œλ”© 속도λ₯Ό 높이기 μœ„ν•΄μ„œ μ„œλ²„λ‘œ μš”μ²­ν•˜λŠ” 파일 숫자λ₯Ό μ€„μ΄λŠ” λ“±μ˜ λ…Έλ ₯을 ν•΄μ™”μŠ΅λ‹ˆλ‹€. μ›ΉνŒ©μ€ 기본적으둜 ν•„μš”ν•œ μžμ›μ€ 미리 λ‘œλ”©ν•˜λŠ”κ²Œ μ•„λ‹ˆλΌ κ·Έ λ•Œ κ·Έ λ•Œ μš”μ²­ν•˜μžλŠ” 철학을 κ°–κ³  μžˆμŠ΅λ‹ˆλ‹€. Code splitting같은 κΈ°λŠ₯을 μ΄μš©ν•˜μ—¬ μ›ν•˜λŠ” λͺ¨λ“ˆμ„ μ›ν•˜λŠ” 타이밍에 λ‘œλ”©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

Entry

μ›Ή μžμ›μ„ λ³€ν™˜ν•˜κΈ° μœ„ν•΄ ν•„μš”ν•œ 졜초 μ§„μž…μ μ΄μž μžλ°”μŠ€ν¬λ¦½νŠΈ 파일 κ²½λ‘œλ‹€.

// μ›ΉνŒ© μ‹€ν–‰ μ‹œ src/index.jsλ₯Ό λŒ€μƒμœΌλ‘œ μ›ΉνŒ©μ΄ λΉŒλ“œλ₯Ό μˆ˜ν–‰ν•΄λΌ.
module.exports = {
	entry: './src/index.js'
}

Output

μ›ΉνŒ©μ„ 돌리고 λ‚œ 결과물의 파일 경둜λ₯Ό μ˜λ―Έν•œλ‹€. 객체 ν˜•νƒœλ‘œ μ˜΅μ…˜λ“€μ„ μΆ”κ°€ν•΄μ£Όμ–΄μ•Ό ν•œλ‹€.

// webpack.config.js
var path = require('path');
module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
}

filename : μ›ΉνŒ©μœΌλ‘œ λΉŒλ“œν•œ 파일의 이름
path : ν•΄λ‹Ή 파일의 경둜
path.resolve(): 인자둜 λ„˜μ–΄μ˜¨ κ²½λ‘œλ“€μ„ μ‘°ν•©ν•˜μ—¬ μœ νš¨ν•œ 파일 경둜λ₯Ό λ§Œλ“€μ–΄μ£ΌλŠ” NodeJS API

Loader

μ›ΉνŒ©μ΄ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ 해석할 λ•Œ μžλ°”μŠ€ν¬λ¦½νŠΈ 파일이 μ•„λ‹Œ μ›Ή μžμ›(HTML, CSS, Image λ“±)듀을 λ³€ν™˜ν•  수 μžˆλ„λ‘ λ„μ™€μ£ΌλŠ” 속성이닀.

// css-loader 적용 μ˜ˆμ‹œ
// webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      //ν•΄λ‹Ή ν”„λ‘œμ νŠΈμ˜ CSS νŒŒμΌμ— λŒ€ν•΄μ„œ CSS λ‘œλ”λ₯Ό μ μš©ν•˜κ² λ‹€λŠ” 의미
      {
        test: /\.css$/,
        use: ['css-loader']
      }
    ]
  }
}

test : λ‘œλ”λ₯Ό μ μš©ν•  파일 μœ ν˜•
use : ν•΄λ‹Ή νŒŒμΌμ— μ μš©ν•  λ‘œλ”μ˜ 이름

λ‘œλ” 적용 μˆœμ„œ
기본적으둜 였λ₯Έμͺ½μ—μ„œ μ™Όμͺ½ 순으둜 μ •λ ¬λœλ‹€.

// sass-loader => css-loader => style-loader 순으둜 μ •λ ¬
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

Plugins

μ›ΉνŒ©μ˜ 기보적인 λ™μž‘μ— 좔가적인 κΈ°λŠ₯을 μ œκ³΅ν•˜λŠ” 속성, λ‘œλ”μ™€ λ‹€λ₯΄κ²Œ ν•΄λ‹Ή 결과물의 ν˜•νƒœλ₯Ό λ°”κΎΈλŠ” 역할을 ν•œλ‹€.

// webpack.config.js
var webpack = require('webpack');

module.exports = {
  plugins: [
    // μ›ΉνŒ©μœΌλ‘œ λΉŒλ“œν•œ 결과물둜 HTML νŒŒμΌμ„ μƒμ„±ν•΄μ£ΌλŠ” ν”ŒλŸ¬κ·ΈμΈ
    new HtmlWebpackPlugin(),
  ]
}

πŸ”₯ λŠλ‚€μ 

npm, webpack에 λŒ€ν•΄μ„œ λ°°μš°λ©΄μ„œ 퍼즐 쑰각이 흩어져 있던 것듀이 점점 맞좰져 κ°€λŠ” λŠλ‚Œμ΄ λ“€μ—ˆλ‹€. μ–΄λ””μ„ κ°€ λ“€μ–΄μ„œ μ‚¬μš©ν–ˆλ˜ 것듀이 μ™œ λ§Œλ“€μ–΄μ‘Œκ³  μ–΄λ–€ λ°©λ²•μœΌλ‘œ μ‚¬μš©ν•˜λŠ” 것인지 μƒˆλ‘­κ²Œ μ•Œκ²Œλ˜μ—ˆλ‹€. μ–Όλ§ˆμ „μ— webpack을 μ‚¬μš©ν•  λ•Œ κ³΅λΆ€ν–ˆμ—ˆλ˜ λ‚΄μš©λ³΄λ‹€λ„ μ„Έμ„Έν•œ λΆ€λΆ„κΉŒμ§€ μ•Œκ²Œλ˜μ–΄μ„œ μƒˆλ‘œμ› λ‹€. μ΄λž˜μ„œ λ‹€λ“€ μ›ΉνŒ© μ›ΉνŒ© ν•˜λŠ”κ΅¬λ‚˜~γ…Žγ…Žγ…‹γ…‹γ…‹

맀일 κ°•μ˜λ₯Ό 밀리지 μ•Šκ³  듀은지 2일째! λ°λΈŒμ½”μŠ€ 끝날 λ•ŒκΉŒμ§€ 밀리지 μ•Šκ³  κΎΈμ€€νžˆ ν•˜μž! ν…μ…˜ 끅볡!으쌰πŸ”₯

Refer

ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€ λ°λΈŒμ½”μŠ€
μ›ΉνŒ© ν•Έλ“œλΆ - μ›ΉνŒ©μ„ κ°€μž₯ 쉽고 λΉ λ₯΄κ²Œ λ°°μš°λŠ” 방법

정리

Day37

profile
맀 μˆœκ°„ μ„±μž₯ν•˜λŠ” κ°œλ°œμžκ°€ 되렀고 λ…Έλ ₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

0개의 λŒ“κΈ€