🦁_22.01.18 TIL

qhflrnfl4324Β·2022λ…„ 1μ›” 18일
2
post-thumbnail

22λ…„ 01μ›” 18일

πŸ“ webpack

πŸ“Ž webpack을 μ‚¬μš©ν•΄μ•Ό ν•˜λŠ” 이유

λΈŒλΌμš°μ €μ—μ„œ JavaScriptκ°€ λ™μž‘ν•˜λŠ” 두 가지 방법

  1. ν•˜λ‚˜μ˜ 큰 μžλ°”μŠ€ν¬λ¦½νŠΈ 파일둜 개발
    => μœ νš¨λ²”μœ„μ™€ 크기, 가독성, μœ μ§€λ³΄μˆ˜μ— λ¬Έμ œκ°€ λ°œμƒ
  2. 각 κΈ°λŠ₯이 μžˆλŠ” 슀크립트λ₯Ό λͺ¨λ“ˆν™”ν•΄μ„œ 개발
    => λ„ˆλ¬΄ λ§Žμ€ 슀크립트 νŒŒμΌμ„ λ‘œλ“œν•  경우, λ„€νŠΈμ›Œν¬μ˜ 병λͺ©ν˜„상을 λ°œμƒ
    => μ—¬λŸ¬ 개의 νŒŒμΌμ„ λ‘œλ”©ν•˜λ”λΌλ„ 같은 μŠ€μ½”ν”„λ₯Ό κ³΅μœ ν•˜κΈ° λ•Œλ¬Έμ— μ „μ—­ λ³€μˆ˜μ˜ 좩돌 λ°œμƒ

=> μ΄λŸ¬ν•œ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ λͺ¨λ“ˆ λ²ˆλ“€λŸ¬λ₯Ό μ‚¬μš©

Module bundler(λͺ¨λ“ˆ λ²ˆλ“€λŸ¬)

bundle : 묢음, 보따리

  • μ—¬λŸ¬ 개의 νŒŒμΌλ“€μ„ ν•˜λ‚˜μ˜ 파일둜 λ§Œλ“€μ–΄μ£ΌλŠ” 라이브러리
    => μ—¬λŸ¬ 개의 μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ„ ν•˜λ‚˜μ˜ 파일둜 λ¬Άμ–΄ ν•œ 번의 μš”μ²­μ„ 톡해 κ°€μ Έμ˜¬ 수 μžˆλ‹€.
    => μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό μ••μΆ•ν•˜κ³  μ΅œμ ν™” ν•˜μ—¬ λ‘œλ”© 속도λ₯Ό 높일 수 μžˆλ‹€.
    => λͺ¨λ“ˆ λ‹¨μœ„λ‘œ 개발 κ°€λŠ₯, 가독성과 μœ μ§€λ³΄μˆ˜κ°€ 용이
    => μ΅œμ‹  μžλ°”μŠ€ν¬λ¦½νŠΈ 문법을 λΈŒλΌμš°μ €μ—μ„œ μ‚¬μš© κ°€λŠ₯

πŸ“Ž webpack Concepts

Entry

  • entryλŠ” webpack이 λΉŒλ“œν•  파일의 μ‹œμž‘ μœ„μΉ˜λ₯Ό λ‚˜νƒ€λƒ„
  • entry μ§€μ μœΌλ‘œλΆ€ν„° import λ˜μ–΄μžˆλŠ” λ‹€λ₯Έ λͺ¨λ“ˆκ³Ό λΌμ΄λΈŒλŸ¬λ¦¬μ— λŒ€ν•œ μ˜μ‘΄μ„±μ„ μ°ΎλŠ”λ‹€.
  • entry의 κΈ°λ³Έ μ„€μ •κ°’ = ./src/index.js
// webpack.config.js 
// entryλ₯Ό ./path/to/my/entry/file.js둜 μ„€μ •
module.export = { 
  entry: './path/to/my/entry/file.js' 
  
  // μ—¬λŸ¬κ°œμ˜ entry 선언이 κ°€λŠ₯ν•©λ‹ˆλ‹€. 
  //  entry: { 
  //  index: './path/to/my/entry/index.js', 
  //  file: './path/to/my/entry/file.js' 
  //}  
}

Output

  • output은 μ›ΉνŒ©μ— μ˜ν•΄ μƒμ„±λ˜λŠ” λ²ˆλ“€μ„ 내보낼 μœ„μΉ˜μ™€ 파일의 이름을 지정
  • output의 κΈ°λ³Έ μ„€μ •κ°’ = ./dist/mainjs
    • output.path : λ²ˆλ“€λœ νŒŒμΌμ„ 내보낼 디렉코리 μœ„μΉ˜ 지정
    • output.filename : λ²ˆλ“€λœ 파일 이름을 지정
// webpack.config.js 
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
  
  // μ—¬λŸ¬ 개의 entryκ°€ μ •μ˜λ˜μ—ˆμ„ 경우, μ•„λž˜μ™€ 같은 섀정이 ν•„μš”
 // output: {
 //   path: path.resolve(__dirname, 'dist'),
 //   filename: '[name].js'
 // }
}

Loaders

  • webpack은 기본적으둜 JavaScript와 JSON 파일만 이해
  • loadersλ₯Ό 톡해 webpack이 λ‹€λ₯Έ μœ ν˜•μ˜ νŒŒμΌμ„ μ²˜λ¦¬ν•  수 μžˆλ„λ‘ μœ νš¨ν•œ λͺ¨λ“ˆλ‘œ λ³€ν™˜
    • test ν”„λ‘œνΌν‹° : λ³€ν™˜ν•  파일 지정
    • use ν”„λ‘œνΌν‹° : λ³€ν™˜ν•  νŒŒμΌμ— 지정할 λ‘œλ”λ₯Ό μ„€μ •
// webpack.config.js 
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

Plugins

  • loadersλŠ” λͺ¨λ“ˆμ„ μ²˜λ¦¬ν•˜κ³ , pluginsλŠ” λ²ˆλ“€λœ νŒŒμΌμ„ 처리
  • pluginsλŠ” λ²ˆλ“€λœ νŒŒμΌμ„ λ‚œλ…ν™” ν•˜κ±°λ‚˜, μ••μΆ•
// webpack.config.js 
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

Mode

  • mode의 3가지 μ˜΅μ…˜
    • production : mode의 κΈ°λ³Έκ°’, 각 μ„€μ •λ§ˆλ‹€ λ‚΄μž₯된 μ΅œμ ν™” μ˜΅μ…˜μ„ μžλ™μœΌλ‘œ μ„€μ •
    • development : λΉ λ₯΄κ²Œ λΉŒλ“œ
    • none : 아무 κΈ°λŠ₯없이 webpack이 λΉŒλ“œ
module.exports = {
  mode: 'production'
};

πŸ“Ž 정리

  • webpack은 entry둜 μ„€μ •λœ μ‹œμž‘μ μ—μ„œ μ˜μ „μ„±μ„ 가진 λͺ¨λ“  νŒŒμΌμ„ μ••μΆ•ν•˜μ—¬ output 지정에 ν•˜λ‚˜μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ„ λ§Œλ“€μ–΄ μ€€λ‹€.
  • μ΄λ•Œ, μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ μ•„λ‹Œ νŒŒμΌμ€ loadersλ₯Ό 톡해 μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ μœ νš¨ν•œ λͺ¨λ“ˆλ‘œ λ³€ν™˜ν•˜κ³ , pluginsλ₯Ό μ΄μš©ν•˜μ—¬ λ²ˆλ“€λœ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό λ‚œλ…ν™”ν•˜κ±°λ‚˜ μ••μΆ•ν•œλ‹€.
  • modeλŠ” webpack의 μ‚¬μš© λͺ©μ μ— 따라 섀정을 μ§€μ ν•˜λŠ” 역할을 ν•œλ‹€.

참고링크

1개의 λŒ“κΈ€

comment-user-thumbnail
2022λ…„ 1μ›” 18일

λ‘œλ”μ™€ ν”ŒλŸ¬κ·ΈμΈ.. λ„ˆλ¬΄ μ–΄λ €μ›Œμš”....

λ‹΅κΈ€ 달기