[Vue] Cli? Webpack? 간단 개념

Cli란?

명령 줄 인터페이스(CLI, Command line interface)로 터미널을 통해 사용자와 컴퓨터가 상호작용하는 방식이다.

 

Vue Cli란?

기본 vue 개발 환경을 설정해주는 도구이다.

기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜 수 있다. 다만 싱글파일 컴포넌트 체계를 사용하려면 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩(Webpack)이나 브라우저리파이(Browserify)와 같은 도구가 필요합니다.

 

vue-cli 설치 명령어 (기존 Vue CLI 2)

• vue init webpack : 고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅，문법 검사 등을 지원
• vue init webpack-simple : 웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
• vue init browserify : 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅，문법 검사 등을 지원
• vue init browserify-simple : 브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
• vue init simple : 최소 뷰 기능만 들어간 HTML 파일 1개 생성
• vue init pwa : 웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트

2018년 8월에 Vue CLI 3 가 정식 릴리즈 되었다.

기존 Vue CLI2 는 vue-cli 였는데, 이번 Vue CLI3는 @vue/cli라는 새로운 패키지 이름을 사용하고 있다.

기존에 Vue CLI2를 사용하고 있었다면, vue라는 커맨드의 네임스페이스가 꼬일지도 모르니 Vue CLI2를 제거하고 CLI3를 전역으로 설치해야 한다.

 

개발 서버를 구동하거나 상용 빌드를 할 때 NPM 커맨드를 사용할 수 있었던 이유는 Vue CLI가 관련 vue-cli-service 커맨드를 NPM 스크립트로 package.json 파일에 등록해놓았기 때문이다.

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

npm 커맨드 대신에 Vue CLI Service 커맨드를 직접 사용하고 싶으면, npx 커맨드를 사용하면 된다.

 

 

Webpack이란?

웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module bundler)다.

위 사진에서  그런트나 걸프 같은 빌드툴과 웹팩의 차이점을 볼 수 있다.

그런트나 걸트 같은 빌드 툴은 정의한 경로에서 구성과 일치하는 파일을 찾는다. 따라서 구성 파일에서 이러한 파일을 변환, 조합 및 축소하는 작업이나 단계를 지정해야 한다.
반면에 웹팩은 프로젝트 전체를 한 단위로 분석한다. 즉, 지정한 메인 파일에서 시작해 자바스크립트의 require(webpack commonJS 모듈 지원)과 import(ES6)문을 참고해 프로젝트의 모든 의존성을 조사하고 로더를 이용해 처리한 후 번들로 묶은 자바스크립트 파일을 생성한다.

CLI와 Webpack 의 자세한 내용은 다음에 정리!

 

참고 사이트

https://cli.vuejs.org/guide/cli-service.html#using-the-binary

CLI Service | Vue CLI

https://www.daleseo.com/vue-cli3/

Vue CLI 3 사용법

https://jusungpark.tistory.com/52

웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [1]