Posted on

μ•ˆλ…•ν•˜μ„Έμš” Mambo μž…λ‹ˆλ‹€.

μ˜€λŠ˜μ€ Webpack 5 기반의 Vue 개발 ν™˜κ²½μ— λŒ€ν•΄μ„œ μ•Œμ•„λ³΄λŠ” μ‹œκ°„μ„ 가져보도둝 ν•˜κ² μŠ΅λ‹ˆλ‹€.
λ³Έ κΈ€μ—μ„œ μ„€λͺ…ν•œ λ‚΄μš©μ— λŒ€ν•œ μ½”λ“œλŠ” kdevkr/webpack5μ—μ„œ μ œκ³΅ν•©λ‹ˆλ‹€.

Webpack

λ°˜λ“œμ‹œ 그런 것은 μ•„λ‹ˆμ§€λ§Œ λ§Žμ€ 뢄듀이 Create React App λ˜λŠ” Vue CLIλΌλŠ” 도ꡬλ₯Ό ν†΅ν•΄μ„œ ν”„λ‘ νŠΈμ—”λ“œ 개발 ν™˜κ²½μ— λŒ€ν•œ κΈ°λ³Έ 프리셋을 기반으둜 ν•™μŠ΅μ„ μ‹œμž‘ν•˜κ±°λ‚˜ 개발 ν™˜κ²½μ„ κ΅¬μΆ•ν•©λ‹ˆλ‹€. 이 도ꡬ듀은 μ—¬λŸ¬κ°€μ§€ 사항에 λŒ€ν•œ μ›ΉνŒ© ꡬ성을 기본적으둜 μ œκ³΅ν•¨μœΌλ‘œμ¨ μ›ΉνŒ©μ— λŒ€ν•œ λ‚΄μš©μ„ μ•Œμ§€ λͺ»ν•˜λ”라도 μ‰½κ²Œ λ¦¬μ•‘νŠΈ λ˜λŠ” 뷰에 λŒ€ν•œ ν•™μŠ΅μ„ 진행할 수 있게 λ„μ™€μ£ΌλŠ” μœ μš©ν•œ λ„κ΅¬μž…λ‹ˆλ‹€.

κ·ΈλŸΌμ—λ„ λΆˆκ΅¬ν•˜κ³ , 싀무 ν™˜κ²½μ—μ„œλŠ” 이 도ꡬ듀을 μ‚¬μš©ν•˜μ§€ μ•Šκ³  직접 μ›ΉνŒ© 섀정에 λŒ€ν•΄ κ΅¬μ„±ν•˜μ—¬ μ‚¬μš©ν•©λ‹ˆλ‹€. λ˜ν•œ, Vue CLIλŠ” μ•ˆνƒ€κΉκ²Œλ„ μ›ΉνŒ© 4에 λŒ€ν•œ ꡬ성을 μ œκ³΅ν•˜λ―€λ‘œ 이 λ„κ΅¬λ‘œ λ§Œλ“€μ–΄μ§€λŠ” ν™˜κ²½μ€ 무쑰건 μ›ΉνŒ© 4둜 μ œν•œλ˜λŠ” λ¬Έμ œμ μ„ 가지고 μžˆμŠ΅λ‹ˆλ‹€. 2020λ…„ 10월에 릴리즈된 μ›ΉνŒ© 5 기반의 개발 ν™˜κ²½μ„ λ§Œλ“€κΈ° μœ„ν•΄μ„œλŠ” 직접 μ›ΉνŒ© ꡬ성을 μˆ˜ν–‰ν•  수 μžˆμ–΄μ•Όλ§Œ ν•©λ‹ˆλ‹€.

μš”κ΅¬μ‚¬ν•­

μ‹œμž‘ν•˜κΈ°μ— μ•žμ„œ, μ›ΉνŒ© 5λŠ” λ…Έλ“œ 10.13.0 μ΄μƒμ˜ 버전을 μš”κ΅¬ν•˜λ©° ν•¨κ»˜ 개발 ν”„λ‘μ‹œ μ„œλ²„λ‘œ ν™œμš©ν•  수 μžˆλŠ” webpack-dev-server@4 μ—μ„œλŠ” λ…Έλ“œ 12.13.0 이상을 μš”κ΅¬ν•©λ‹ˆλ‹€.

  • Webpack5 required v10.13.0+
  • webpack-dev-server@4 v12.13.0+

ν”„λ‘œμ νŠΈ λ…Έλ“œ 버전 μ œν•œ

μœ„ μš”κ΅¬μ‚¬ν•­μ— 따라 ν”„λ‘œμ νŠΈμ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” λ…Έλ“œ 버전을 μ œν•œν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. μ œκ°€ 이전에 κ³΅μœ ν•œ ν”„λ‘œμ νŠΈμ˜ λ…Έλ“œ 버전 μ œν•œν•˜κΈ°λ₯Ό μ°Έκ³ ν•˜μ—¬ λ…Έλ“œ 엔진 버전을 12.13.0 μ΄μƒμœΌλ‘œ μ„€μ •ν•΄λ‘λŠ” 것을 μΆ”μ²œν•˜λŠ” λ°”μž…λ‹ˆλ‹€.

μ»€λ°‹λ³„λ‘œ ν™•μΈν•˜λŠ” ꡬ성

각 컀밋 λ‹¨μœ„μ˜ Browser Filesλ₯Ό 톡해 μ–΄λ–»κ²Œ ꡬ성이 λ³€ν™”ν•˜λŠ”μ§€λ₯Ό μ°Έκ³ ν•˜μ‹œλ©΄ μ’‹μŠ΅λ‹ˆλ‹€.

Add webpack.config.js for default configuration

κΈ°λ³Έ ꡬ성을 μœ„ν•œ webpack.config.js νŒŒμΌμ„ λ§Œλ“€κ³  node-env 값에 따라 λ²ˆλ“€ 파일λͺ…을 λ‹€λ₯΄κ²Œ 지정할 수 μžˆμŒμ„ λ³΄μ—¬μ€λ‹ˆλ‹€.

npx webpack --node-env production # λͺ¨λ“œλ₯Ό μ§€μ •ν•˜μ§€ μ•Šμ•˜μ§€λ§Œ node-env 값에 μ˜ν•΄ μ²˜λ¦¬λ©λ‹ˆλ‹€.

Add vue-loader

Vue SFC νŒŒμΌμ„ μ²˜λ¦¬ν•˜κΈ° μœ„ν•œ vue-loaderλ₯Ό μΆ”κ°€ν•˜κ³  Vue 개발 ν™˜κ²½μ„ μ€€λΉ„ν•˜κ³  κ°„λ‹¨ν•œ μƒ˜ν”Œ HTML νŒŒμΌμ„ λ§Œλ“€μ–΄μ„œ Vue μ½”λ“œκ°€ μ •μƒμ μœΌλ‘œ λ³€ν™˜λ˜μ—ˆμŒμ„ ν™•μΈν•©λ‹ˆλ‹€.

Add sass, postcss

Vue SFC의 μŠ€νƒ€μΌ λΈ”λ‘μ˜ μ–Έμ–΄λ₯Ό SCSS둜 μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œ sass 및 postcss에 λŒ€ν•œ 섀정을 μΆ”κ°€ν•©λ‹ˆλ‹€.

Add stylelint

λ°˜λ“œμ‹œ ν•„μš”ν•œ 섀정은 μ•„λ‹ˆμ§€λ§Œ CSS에 λŒ€ν•œ 린트λ₯Ό μ μš©ν•˜κΈ° μœ„ν•΄ stylelintλ₯Ό postcss ν”ŒλŸ¬κ·ΈμΈμœΌλ‘œ μΆ”κ°€ν•©λ‹ˆλ‹€.

Add eslint

μžλ°”μŠ€ν¬λ¦½νŠΈμ— λŒ€ν•œ 린트λ₯Ό μ μš©ν•˜κΈ° μœ„ν•΄ eslintλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.

Add babel

ES6+ 문법을 μ§€μ›ν•˜μ§€ μ•ŠλŠ” λΈŒλΌμš°μ €λ₯Ό μœ„ν•΄ ES5 λ¬Έλ²•μœΌλ‘œ λ³€ν™˜ν•˜κΈ° μœ„ν•œ babel을 μΆ”κ°€ν•©λ‹ˆλ‹€. babel 7 λΆ€ν„°λŠ” 폴리필 적용 방식이 λ³€κ²½λ˜μ—ˆμŒμ„ μ£Όμ˜ν•΄μ•Όν•©λ‹ˆλ‹€. 바벨 폴리필에 λŒ€ν•΄μ„œλŠ” λ‹€μŒμ˜ 두 링크λ₯Ό μ°Έκ³ ν•˜μ‹œλ©΄ μ’‹μŠ΅λ‹ˆλ‹€.

Add browserslist

postcss의 autoprefixer λ˜λŠ” babelμ—μ„œ μ°Έκ³ ν•  νƒ€κ²Ÿ 정보λ₯Ό μœ„ν•΄ browserslistλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.

Add prettierrc

λΆˆν•„μš”ν•œ ν¬λ§·νŒ…μ„ λ°©μ§€ν•˜κΈ° μœ„ν•œ prettier μ˜΅μ…˜μ„ μ‘°μ •ν•©λ‹ˆλ‹€.

Add asset

이미지 λ˜λŠ” 폰트 등을 μœ„ν•œ 에셋 λͺ¨λ“ˆμ„ μΆ”κ°€ν•©λ‹ˆλ‹€.

Apply strict npm engines

μ§€κΈˆκΉŒμ§€ μ„€μΉ˜λœ νŒ¨ν‚€μ§€μ—μ„œ μ΅œμ†Œλ‘œ μš”κ΅¬ν•˜λŠ” λ…Έλ“œ 버전을 λͺ…μ‹œν•˜κ³  μ œν•œλ˜λ„λ‘ μ„€μ •ν•©λ‹ˆλ‹€.

Apply settings for vscode

VSCodeλ₯Ό μ‚¬μš©ν•˜λŠ” 경우 μ €μž₯될 λ•Œ ESLintκ°€ λ™μž‘ν•˜λ„λ‘ μ„€μ •ν•©λ‹ˆλ‹€.

Add project version in output filename

(Optional) package.json에 μ •μ˜λœ ν”„λ‘œμ νŠΈ 버전을 λ²ˆλ“€ 파일λͺ…에 ν¬ν•¨μ‹œν‚¬ 수 μžˆμŒμ„ λ³΄μ—¬μ€λ‹ˆλ‹€.

Apply optimization

ν”„λ‘œλ•μ…˜ ν™˜κ²½μ„ μœ„ν•œ μ΅œμ ν™” ꡬ성을 μ‘°μ •ν•©λ‹ˆλ‹€.

Add manifest

λ§€λ‹ˆνŽ˜μŠ€νŠΈ 파일이 생성할 수 μžˆλ„λ‘ ν”ŒλŸ¬κ·ΈμΈμ„ μΆ”κ°€ν•©λ‹ˆλ‹€.

npx webpack --node-env production --env manifest

Add bootstrap-vue

BootstrapVueλ₯Ό 좔가해보고 μ΅œμ‹  λ²„μ „μ˜ Sassμ—μ„œ 좜λ ₯λ˜λŠ” Deprecation κ²½κ³ κ°€ 좜λ ₯λ˜μ§€ μ•Šλ„λ‘ μ„€μ •ν•©λ‹ˆλ‹€.

κ°μ‚¬ν•©λ‹ˆλ‹€.