[WEBPACK] 뷰 템플릿 만들기 - 2

vue template

 

1. Vue 최신 버젼 설치

npm i vue@next

npm i vue@next
명령어는 Node Package Manager(NPM)를 사용하여 Vue.js의 "next" 태그가 붙은 버전을 설치하는 명령입니다. 여기서 "next" 태그는 Vue.js의 최신 베타, 알파 또는 Release Candidate(RC) 버전을 가리키는 데 사용됩니다. 이 명령어를 사용하면, Vue.js의 안정적인 최신 버전 대신에, 최신 기능과 개선 사항이 포함된 선도적인 버전을 실험해볼 수 있습니다.

※ vue vue@next 에러 발생시

만약 npm vue 설치중 에러가 발생했다면,

버젼을 명시해서 설치합니다.

npm i vue@3 

2. Vue.js 관련 의존성 패키지 설치

npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc

npm i -D:
npm install --save-dev의 축약형으로, 주어진 패키지를 개발 의존성으로 설치합니다. 이는 패키지가 프로젝트 개발 시에만 필요하며, 실제 운영 환경에서는 필요하지 않음을 의미합니다.
vue-loader@next:
vue-loader는 Vue 컴포넌트를 웹팩(Webpack) 번들에 포함시키기 위해 사용되는 로더입니다. @next 태그는 vue-loader의 최신 베타, 알파, 또는 RC(Release Candidate) 버전을 지정합니다. 이는 Vue 3와 같은 최신 Vue 버전에 맞춰 최적화된 vue-loader를 사용하고자 할 때 유용합니다.
vue-style-loader:
vue-style-loader는 Vue 컴포넌트 내의 스타일을 동적으로 DOM에 삽입하기 위한 웹팩 로더입니다. 이는 style-loader의 Vue.js용 포크(fork)로, Vue 컴포넌트 스타일의 특별한 핫 리로드 및 SSR(Server-Side Rendering) 지원을 제공합니다.
@vue/compiler-sfc: Vue 3에서 소개된 Single File Component(SFC)를 위한 공식 컴파일러입니다. .vue 파일(싱글 파일 컴포넌트) 내의 템플릿, 스크립트, 스타일 등을 처리하고, 해당 내용을 자바스크립트 모듈로 변환하는 작업을 담당합니다.

3. 웹팩 파일 처리하기 위한 로더 설치

npm i -D file-loader

npm i -D file-loader
명령어는 Node.js 프로젝트에
file-loader
를 개발 의존성(development dependency)으로 설치하는 데 사용됩니다. 이 명령어는 웹팩(Webpack)과 같은 모듈 번들러를 사용하는 프론트엔드 개발 환경에서 주로 적용됩니다.

4. Vue 프로젝트용 Eslint 설치

npm i -D eslint eslint-plugin-vue babel-eslint

npm i -D eslint eslint-plugin-vue babel-eslint
명령어는 개발자가 Vue.js 프로젝트에서 JavaScript 코드를 효율적으로 분석하고, 일관된 코딩 스타일을 유지하기 위해 ESLint와 관련 플러그인을 개발 의존성으로 설치하는 데 사용됩니다. 이 명령어의 각 구성 요소에 대해 자세히 설명하겠습니다.

4. package.json, webpack.config 등 설정파일 수정

플러그인들이 설치가 완료되면 정상적인 구동을 위해 config 파일을 수정해야 합니다.
해당 파일들에 대한 상세 설명은 생략하지만 
아래 git repository를 참고하시기 바랍니다.
git repository link : 
( 작성중 )

5. 실행

위 코드를 제대로 적용 하셨다면 
" npm run dev " 로 정상적으로 webpack template 실행이 가능하실 겁니다.

다음 포스트에서는 vue3에 새로운 기술들을 적용해보도록 하겠습니다.