웹팩으로 Vue 만들기 + ( Error 🪓 )
Vue를 처음 사용하게 되었는데, 웹팩에 대한 개념도 공부하며 Vue를 설치해 보기로 하였습니다.
웹팩으로 설치하면서 패키기 제이슨과 웹팩에 대한 개념을 한뎁스 더 나아가 이해할 수있었고,
오류를 해결하며 오류해결에 대한 두려움을 조금 더 극복하게 되었습니다..
1. Node.js, npm 설치
먼저 준비해햐 할 것은 node js를 미리 설치해 두어야 합니다.
그럼 npm이 자동으로 깔립니다.
(-v로 버전과 설치 여부를 알 수 있습니다.)
프로젝트를 만들고 싶은 폴더로 간 후 npm init을 하면 여러가지 설정이 나오는데,
package에는 프로젝트 name을 써줍니다.
그렇게 설치를 하면, package.json 파일이 만들어집니다.
package.json을 쉽게 설명하자면, '내가 쓰고있는 남의 소스코드(package)들을 정리해서보여주는 곳'이라고 할 수 있습니다.
✅ package.json을 이해하는 것이 중요한 이유!
큰 프로젝트를 하게되면 이 소스코드들이 매우 많아지고,
각각의 소스코드들은 버전이 있습니다. 각각의 소스코드를 알고 스스로 버젼관리를 할 수 있기 때문에 이렇게 직접 package.json을 설정해 주는 것이 중요합니다~!!
2. npm install vue
npm install vue를 하면 뷰를 설치할 수 있습니다.
그렇다면 이제 vue를 설치할 수 있고, script tag에 컴포넌트와 인스턴스 등을 쓰지 않아도 됩니다.
3. webpack 설치
npm install webpack webpack-cli -D 명령어를 이용하여 webpack과 webpack-cli를 함께 설치해줍니다.
여기서 -D는 옵션으로, 나는 개발할 때만 웹팩과 웹팩 cli를 사용하겠다! 라는 뜻입니다.
-D대신에 --save-dev 키워드를 입력해도 됩니다.
자 그럼 package.json을 보면서 이때까지 어떤 것들이 설치되었는지 볼까요?
먼저 저는npm init을 할 때 name을 number-baseball로 설정하였습니다.
버전은 기본이 1.0.0으로 설정되고
main은 프로젝트에서 가장 중요한 파일을 가리킵니다.
license는 제 프로젝트의 라이센스입니다.
✅ dependencies , devDependencies 차이점은?
그런데 dependencies에는 vue가 devDependencies에는 웹팩과 웹팩 cli가 있습니다.
webpack, webpack-cli 두 개가 설치할 때 -D 옵션을 해주게 되면 devDependencies에 추가되는데,
이 두가지는 배포를 위한 보조 도구이기 때문에 배포를 할 때에는 필요하지 않고 개발할 때에만 필요하기에 -D를 해주었습니다.
반면에 vue는 개발과 배포 둘 다에서 사용되기 때문에 dependencies에 포함이 된 것이죠!!
4. webpack.config.js 파일 만들기 + 지금 까지의 파일 구조
자 그럼 이제 프로젝트 폴제 제일 바깥에 웹팩 파일을 만들어줍니다. (안에 내용은 뒤에서!!)
그리고 지금까지 설정된 파일 구조를 한번 살펴보겠습니다.
파일은 만들면 숫자야구 폴더에 지금까지 이렇게 파일과 폴더가 구성된 것을 볼 수 있습니다.
또 node_modules를 보면
vue, webpack, webpack cli도 있는데, 이것들도 다른 사람이 만든 소스코드를 사용한 것이고
얘네들 만의 package.json이 있어서 얘네들이 쓰는 것을 또 다운로드 받은 것입니다.
이렇게 남의 코드들이 엄청 많기때문에 package.json이 있는습니다.
5. webpack.config.js 파일 작성하기~~!
노드에 모듈을 만들없습니다.
이렇게 만든 모듈은 웹팩이 나중에 췝팩처리를 할 때 (즉 웹팩킹을 할 때) 이 객체를 사용합니다.
우리가 작성할 이 파일에 웹팩 설정을 다 넣으면 되는 것입니다.
정리: 웹팩을 쓰는 이유 === 스크립트가 너무 많아서 하나로 합치기 위해
다양한 설정이 있지만 크게 4가지 설정이 가장 중요합니다.
entry & output
아까 package.js에서 가장 중요한 파일을 main에 저장였습니다.
제 파일에서는 그 파일이 main.js였는데 entry안에 app안에 파일 경로를 넣어줍니다.
그리고 나중에는 그 app을 하나의 파일로 만들기 때문에 output에 app.js라는 파일을 만들도록 합니다.
여기서 app 대신에 [name]으로 바꿔주면 혹시나 app 파일을 다른 파일로 바꿀 때 귀찮게 또 따로 바꾸지 않아도 됩니다.
또 output에 path를 넣어줍니다.
이 path는 폴더 경로인데, 나중에 dist폴더 안에 app.js가 최종 결과물로 나오게 됩니다.
결론 === 핵심 파일을 entry에 넣어주고 && output은 main.js에서 꼬리를 물고 연결된 파일들이 ./dist에 합쳐짐
(여기서 나오는 main.js, app, dist는 원하는 대로 이름을 바꿔도 된다)
참고로 dist/app.js가 어떻게 만들어지게 되었는지 추가하겠습니다.
웹팩을 만드는 이유 중 하나는 스크립트를 너무 많이 사용하면 스크립트 순서나 수정에 불편함이 생기기 때문입니다.
그리고 처음에 웹팩이 아닌 CDN 이용해서 만들었는데, 웹팩을 설치하면 뷰를 설정해주는 스크립트가 필요가 없어지고 dist 폴더로 모든 것을 묶어버릴수있게됩니다.
modules & plugin
module은 웹팩의 핵심이라고 합니다.
module 안에는 rules가 있는데, 배열 안에 객체의 구조를 띄며, 파일을 합칠 때 어떻게 합칠지, 어떻게 처리해야 할 지 보여주는 곳입니다.
자바스크립트가 이닌 것들(예를 들어 vue확장자)을 추가 할 때마가 rules에 loader를 추가하면 그 부분을 웹팩이 알아서 자바스크립트로 바꾸어줍니다.
더 자세한 내용은 아래에서 에러를 해결하면서(또륵) 해결해 보겠습니다.
결론: 어떤 파일이든 자바스크립트로 바꿔버린다!!
webpack.config.js 구조 중간 확인
6.main.js, vue, vue component 연결
# main.js
앞서 만들었던 main.js는 가장 중심 파일로 vue 인스턴스를 만드는 곳입니다.
package.json에서 설치한 vue를 가져와 만들 수 있게 된 것이지요~
캡쳐를 못해서 코드블럭스로 쓰면
import Vue from "vue";
new Vue().$mount("#root");
// $mount el과 같은 것임
# 파일이름.vue
뷰 확장자를 가진 이곳은 vue component를 만드는 곳입니다.
이 안에는 templet, script, style이 있고, 이것들도 자바스크립트입니다.
여기서 미리 기억해두면 좋은 것! .vue 확장자로 파일을 만들었다 ->> 나중에 무슨 에러가 나고 해결합니다. (스포)
그럼 스크립트 파일은 main.js, 파일이름.vue로 2개가 만들어졌습니다.
아래에서 파일구조를 확인하실 수 있습니다.
아래 script를 보시면 build 가 보이시나요? 이제 npm run build 명령어를 사용하면 웹팩이 실행됩니다.
그럼 이제 웹팩을 돌리고 실행하면 끝입니다!! 그동안 고생하셨습니다~~ ❣️
에러🤗: 응 아니야 ~ (두둥~ !)
7. 에러를 통해 배우는 추가 설정
사실 끝난 것이 아닙니다.
에러를 해결하면서 무엇이 잘못 된 것인지 더 알아보겠습니다!
(에러 마다 구별을 더 쉽게하기 위해 🪓로 표시하였습니다)
🪓
문제
먼저 이 에러를 보시면 path가 절대경로가 아니라는 에러입니다.
해결
node 에서는 path라는 스크립트를 만들어놓았습니다.
노드에서 제공하는 모듈 path안에 join이라는 메서드가 있기에
path.join(__dirname, 'dist') 이렇게 바꾸어줍니다.
// __dirname:현재 경로 (숫자야구 안에 있는 dist폴더)
🪓
그리고 빠트린 것이 있는데 main.js --- vue.js --- NumberBaseball.vue 를연결해 주어야 합니다.
그리고 npm run build를 하면 ~? 또 에러가 뜸니당.
웹팩👼🏻 의 생각을 읽어봅시다.
1) 웹팩👼🏻: 응 먼저webpack.config.js에서 entry를 보면 main.js를 확인해야하네?
-----> main.js로 이동
2) 웹팩👼🏻: vue 연결 되어있고, NumberBaseball.vue를 확인해보자.
-----> NumberBaseball.vue로 이동
3) 웹팩👼🏻: 엥 근데 너는 자바스크립트가 아닌데!?
하면서 나온 에러입니다.
🪓
그것을 해결하기 위한 것이 module의 rules()입니다.
🪓
이렇게 웹팩 컴피그에 test와 module을 추가해주고, 로더가 없다고 하였으니 vue-loader를 다운받아줍니다.
npm i vue-loader -D
test: /\.vue$/,
// 파일 명이 .vue로 끝나는 파일 ($가 끝)짜잔 그럼 아래처럼 뷰 로더가 설치되었습니다.
이제 자바스크립트를 읽는 웹팩👼🏻이가 .vue 형식으 파일을 보면, 이거는 웹팩이 처리하는 것이 아니라 vue loader 가 처리하게됩니다.
npm run build를 하면 또 에러가 났습니다.
🪓
두 번째 에러부더 보면, 뷰로더가 corresponding plugin이 없다고 웹팩 컨피그에 깔으라고 합니다.
사실 뭔지는 잘 모르겠지만 뷰로더를 쓰려면 같이 필요한거같아서 넣습니다.
🪓
또 첫번째 에러에서 뷰-탬플릿-컴파일러 를 다운받으라고 합니다.
네 다운받습니당.
npm i vue-template-compiler -D
여기서 주의해야 할 점은 vue와 vue-template-compiler 버전이 똑같아야 한다는 것입니다.
특정 버전을 깔고싶으면 @원하는 버전 으로 깔아주기! npm i vue@2.7.0 이런 식으로
그럼 진짜 최종적으로 package.json이 만들어집니다 (파일명: 진짜진짜 최종)
그리고 또 진짜 최종적으로webpack.config.js가 만들어집니다 (파일명: 진짜진짜진짜 최종)
지금까지
- Vue 컴포넌트를 만들고
- 웹팩이 설정을 통해서
- main.js, vue.js, 0000.vue를 ./dist/app.js로 하나로 합쳐주기 를 하였습니다.
앞으로 내용을 계속 추가하고 복습하면서 익숙해지도록 노력해야겠습니다...