Webpack 5 기반의 Vue 개발 환경

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 경고가 출력되지 않도록 설정합니다.

감사합니다.