Vue CLI둜 μƒμ„±ν•œ ν”„λ‘œμ νŠΈμ˜ μ›ΉνŒ© μ„€μ • 방법

Vue CLI둜 μƒμ„±ν•œ ν”„λ‘œμ νŠΈμ— μ›ΉνŒ© 섀정을 λ³€κ²½ν•˜λ €λ©΄ μ–΄λ–»κ²Œ ν•΄μ•Ό ν• κΉŒμš”? μ›ΉνŒ© μ„€μ • 확인 & λ³€κ²½ 방법에 λŒ€ν•΄ μ•Œμ•„λ΄…λ‹ˆλ‹€.

Vue CLI둜 μƒμ„±ν•œ ν”„λ‘œμ νŠΈμ™€ μ›ΉνŒ©μ˜ 관계?

보톡 Vue.jsλ₯Ό 배우고 λ‚˜λ©΄ μ‹€μ œ μ„œλΉ„μŠ€λ₯Ό λ§Œλ“€ λ•Œ λ·° CLIλ₯Ό μ΄μš©ν•΄μ„œ ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν• ν…λ°μš”.

vue create my-project

μ΄λ ‡κ²Œ μƒμ„±λœ λ·° ν”„λ‘œμ νŠΈλŠ” μ›ΉνŒ©μ„ 기반으둜 λ™μž‘ν•©λ‹ˆλ‹€.

  • npm run serve : 둜컬 μ„œλ²„λ₯Ό μ›ΉνŒ© 데브 μ„œλ²„λ‘œ μ‹€ν–‰
  • npm run build : μ›ΉνŒ©μœΌλ‘œ μ΅œμ’… κ²°κ³Όλ¬Ό λ³€ν™˜(λΉŒλ“œ)

μ›ΉνŒ©μ€ μ΅œμ‹  ν”„λŸ°νŠΈμ—”λ“œ λΉŒλ“œ μ‹œμŠ€ν…œμ˜ 핡심이 λ˜λŠ” λΉŒλ“œ λ„κ΅¬μž…λ‹ˆλ‹€. μ›ΉνŒ©μ„ 잘 λͺ¨λ₯΄μ‹œλŠ” 뢄듀은 μ›ΉνŒ© κ°•μ˜λ‚˜ μ›ΉνŒ© ν•Έλ“œλΆμ„ μ°Έκ³ ν•΄μ„œ ν•™μŠ΅ν•΄ λ³΄μ„Έμš” πŸ˜„

μƒμ„±λœ λ·° ν”„λ‘œμ νŠΈμ— μ›ΉνŒ© μ„€μ • 파일이 μ•ˆλ³΄μ΄λŠ”λ°μš”?

λ·° CLI 버전 2 μ΄ν•˜μ—μ„œλŠ” μ›ΉνŒ© μ„€μ • 파일(webpack.config.js)이 ν”„λ‘œμ νŠΈ 루트 λ ˆλ²¨μ— λ…ΈμΆœλ˜μ–΄ μžˆμ—ˆμŠ΅λ‹ˆλ‹€. 이런 뢀뢄이 μ›ΉνŒ©μ— μ΅μˆ™ν•˜μ§€ μ•Šμ€ μ‚¬μš©μžλ“€μ—κ²ŒλŠ” 뢀담이 λ˜μ—ˆλŠ”λ°μš”. κ·Έλž˜μ„œ λ·° CLI 버전 3 μ΄μƒλΆ€ν„°λŠ” μ›ΉνŒ© μ„€μ • νŒŒμΌμ„ μ•„λž˜μ™€ 같이 vue-cli-serviceλΌλŠ” μ΄λ¦„μœΌλ‘œ 감좔어 λ†“μ•˜μŠ΅λ‹ˆλ‹€.

cli service λ°‘μ˜ μ›ΉνŒ© μ„€μ • 파일

μœ„ 폴더 μœ„μΉ˜λŠ” μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

src
node_modules
  @vue
    cli-service
...

결과적으둜 μ‚¬μš©μžλ“€μ—κ²ŒλŠ” μ„œλ²„ μ‹œμž‘ λͺ…령어와 λΉŒλ“œ λͺ…λ Ήμ–΄λ§Œ μ•Œλ €μ£Όλ©΄ μ›ΉνŒ©μ€ λͺ°λΌλ„ λ˜κ²Œλ” 기본적인 섀정을 해놓은 κ²ƒμž…λ‹ˆλ‹€.

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

그럼 ν”„λ‘œμ νŠΈμ— μ„€μ •λ˜μ–΄ μžˆλŠ” μ›ΉνŒ© μ˜΅μ…˜ 속성을 μ–΄λ–»κ²Œ λ³Ό 수 μžˆλ‚˜μš”?

λ§Œμ•½ μ›ΉνŒ© μ„€μ • 파일 webpack.config.jsκ°€ ν”„λ‘œμ νŠΈ 루트 레벨둜 λ‚˜μ™€ μžˆλ‹€λ©΄ λ°”λ‘œ 보면 λ˜κ² μ§€λ§Œ vue-cli-service 내뢀에 μ—¬λŸ¬ νŒŒμΌλ“€λ‘œ λ‚˜λ‰˜μ–΄μ Έ μžˆμ–΄ ν•œλˆˆμ— νŒŒμ•…ν•˜κΈ° μ–΄λ ΅μŠ΅λ‹ˆλ‹€. 이 λ•Œ ν”„λ‘œμ νŠΈμ— μ„€μ •λœ μ›ΉνŒ© μ˜΅μ…˜λ“€μ„ 보고 μ‹Άλ‹€λ©΄ μ•„λž˜ λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•©λ‹ˆλ‹€.

vue inspect > options.js

μœ„ λͺ…λ Ήμ–΄λ₯Ό 치면 ν”„λ‘œμ νŠΈ λ‚΄λΆ€μ μœΌλ‘œ μ„€μ •λœ μ›ΉνŒ©μ˜ μ˜΅μ…˜λ“€μ„ options.js νŒŒμΌμ— λ‹΄μ•„μ€λ‹ˆλ‹€. 이제 options.js νŒŒμΌμ„ 열어보면 μ•„λž˜ λ‚΄μš©μ„ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

inspect 결과 파일

ν”„λ‘œμ νŠΈμ˜ μ›ΉνŒ© 섀정을 μˆ˜μ •ν•˜κ³  μ‹Άλ‹€λ©΄?

ν”„λ‘œμ νŠΈμ— μ„€μ •λ˜μ–΄ μžˆλŠ” μ›ΉνŒ©μ˜ μ˜΅μ…˜λ“€μ„ λ³€κ²½ν•˜κ³  μ‹Άλ‹€λ©΄ vue.config.js νŒŒμΌμ„ λ³€κ²½ν•΄μ•Ό ν•©λ‹ˆλ‹€.

// vue.config.js
module.exports = {
  outputDir: 'my-dist',
}

μœ„ outputDir 속성은 μ›ΉνŒ© μ„€μ • 파일의 output.path와 λ™μΌν•œ μ˜΅μ…˜μž…λ‹ˆλ‹€. μ΄λ ‡κ²Œ λ·° CLI의 곡식 κ°€μ΄λ“œμ— μ•ˆλ‚΄λœ λ‚΄μš©μ„ 따라 μ›ΉνŒ© 섀정을 λ³€κ²½ν•΄ μ£Όμ…”μ•Ό μ΅œμ’… λΉŒλ“œμ—μ„œ μ‚¬μš©μžκ°€ λ³€κ²½ν•œ 값이 ν•¨κ»˜ μ μš©λ©λ‹ˆλ‹€.

이외에도 μ•„λž˜μ™€ 같은 μ˜΅μ…˜λ“€μ„ μ΄μš©ν•˜μ—¬ μ›ΉνŒ© 섀정을 μΆ”κ°€ λ˜λŠ” 체이닝을 ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

// vue.config.js
module.exports = {
  // μ˜΅μ…˜ μΆ”κ°€
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  // μ˜΅μ…˜ 체이닝
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}

μ˜΅μ…˜ 좔가와 체이닝 λ°©λ²•μ˜ μ •ν™•ν•œ κ°€μ΄λ“œλŠ” CLI 곡식 λ¬Έμ„œλ₯Ό μ°Έκ³ ν•˜μ„Έμš” πŸ˜ƒ