Vue3 webpack

기존에 git-hub 에 만들어 두었던 webpack-teamplate 를 이용해 vue3 환경에서 새로운 프로젝트로 만들어보자

npx degit https://github.com/hi-woong/webpack-template-basic.git vue3-webpack-template

clone 과 다르게 degit 은 (버전내역이 삭제된 상태로) 기존에 저장소에 저장되어있던 프로젝트를 가져와서 새롭게 가져다가 쓸수있다.

 

복사가 완료 됬다면 새로만든 폴더로 이동후 vscode 를 실행 시켜주자 

code . -r

폴더 구조에서 기존에 있던 js 폴더를 삭제후 루트 경로에 src 폴더를 생성하고 그안에 App.vue, main.js 추가 

vue3 를 설치해줘야하기때문에 최신버전으로 설치 진행

vue.js 는 개발할때만 사용하는게 아니고 실제로 브라우저에서 동작하는 패키지이기 때문에 

개발의존성으로 설치하는게 아니고 일반의존성으로 설치해줘야함!

npm i vue@next

vue.js 패키지 말고도 다른 패키지도 설치 해줘야한다. 그이유는 vue.js 패캐지 같은 경우에는 기본적인 문법을 해석해주는 용도이고 프로젝트에 vue 라는 확장자를 가지고 있는 파일을 관리하려면 추가적인 webpack 관련이있는 패키지를 설치해줘야한다.

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

@vue/compiler-sfc 실제로 뷰파일을 변환해서 브라우저에서 동작할수 있는 형태로 바꿔줌

 

기존에 entry 부분의 진입점을 js 폴더가 아닌 src 로 변경 후

module 부분으로 와서 vue 라는 확장자를 해석할 수 있도록 rules 새로운 규칙을 생성해줘야한다.

use 라는 속성 부분에는 만약에 연결하는 로더가 하나뿐이라면 문자데이터 하나만 적어줘도 된다. [] 배열로  작성할 필요없음

 

 

객체데이터를 가져온다.

생성자 함수 작성

sample 로 간단하게 출력이 잘되는지 확인용! 

html  부분에서 app 라는 id 값을 가지고있는 해당 요소에다가 vue.js 프로젝트를 연결하는 개념이다.

개발서버를 연후 확인! 정상적으로 작동한다.

 

확장자를 지웠을시 에러가 출력되는데 이걸 webpack 을통해서 개선시켜줄 수 있음!

 resolve:{
      extensions: ['.js','.vue']  
    },

js , vue 확장자를 가진 파일들을 경로에서 확장자를 명시해주지 않아도 문제가 발생하지 않는다.

components 폴더 생성후 내부에 HelloWorld.vue 파스칼 표기법으로 만든후 

static 폴더안에 있는 images 폴더를 src 내부에 이동시킨후 assets 로 변경해준다.

 

vue 확장자를 가진 파일에서 이미지를 사용하기 위해서는 기본적인 설정이 필요하다.

특정한 파일들을 읽어서 브라우저에 출력해주는 webpack 의 loader 이다.

npm i -D file-loader

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

https://eslint.vuejs.org/

Introduction | eslint-plugin-vue