0. 시작하기 전에
- webpack 포스팅에서 생성한 프로젝트를 기반으로 Vue 프로젝트를 만들 예정입니다.
- 필요하신 분은 아래에 있는 제 github 주소를 사용하여 해당 프로젝트를 사용하셔도 됩니다.
github.com/akaRaphael/webpack-basic.git
akaRaphael/webpack-basic
basic webpack project. Contribute to akaRaphael/webpack-basic development by creating an account on GitHub.
github.com
1. webpack 프로젝트 가져오기
- 터미널 입력: npx degit github.com/akaRaphael/webpack-basic.git 원하는프로젝트이름
- 해당 명령어는 npx의 degit 기능을 사용하여 깃헙 주소의 프로젝트를 원하는 프로젝트 이름으로 새롭게 생성한다.
a) git clone이 아니라 npx degit을 사용하는 이유
- git clone을 사용하면 기존의 프로젝트가 갖고 있는 버전 내역을 모두 가져오게 된다.
- 그렇게 되면 새로운 프로젝트로 기존의 코드를 재사용 하는 의미가 없다.
- 그러나, npx degit을 이용하면 기존 프로젝트가 갖고 있는 버전 내역 없이 코드만 재사용하여 새로운 프로젝트로 만들 수 있다.
- 이와 같은 이유로, npx degit을 사용하는 것이다.
2. Vue 프로젝트 만들기
a) Vue를 설치하기 전에 해야할 설정
- js라는 이름의 기존 폴더 삭제
- 루트 경로에 src 폴더 생성 후 내부에 main.js 파일, App.vue 파일 생성
b) Vue 및 기타 패키지 설치
- 터미널 입력: npm i vue@next
- @next를 붙여주는 이유는 Vue3 버전을 설치하기 위함이다. 설치 완료 후 다음 명령어를 터미널에 입력해준다.
- 터미널 입력: npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc
- vue-loader는 vue를 읽기위해 필요한 패키지다.
- vue-style-loader는 vue에 하나로 묶여있는 css를 읽기위해 필요한 패키지다.
- vue/compiler-sfc는 vue 파일을 브라우저에서 읽을 수 있도록 만들어주는 기능을 하는 패키지다.
c) webpack.config.js 설정
// import
const path = require('path') // node 모듈을 import 해오는 기본방법
const HtmlPlugin = require('html-webpack-plugin') // webpack plugin 모듈 가져오기
const CopyPlugin = require('copy-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
// export
module.exports = {
// 파일을 읽어들이기 시작하는 진입점 설정
entry: './src/main.js',
//결과물(번들)을 반환하는 설정
output: {
// path: path.resolve(__dirname, 'dist'), // 결과물의 반환지점을 설정
// filename: 'main.js',
// 위에 path와 filename 을 주석처리 한 이유는, default로 설정되어 있기 때문
// path는 dist로 filename은 위에 entry에 설정한 파일이름 그대로 따라감
// npm run build 입력하면 dist 폴더와 내부파일(결과물)이 생성됨
clean: true // 덮어쓰기 기능 속성
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.s?css$/,
// .scss 또는.css 확장자를 갖는 파일을 찾는 정규표현식
// 물음표를 붙이면 있을수도 없을수도 있다는 뜻 ==> s가 있거나 없을 수도 있다.
use: [
'vue-style-loader',
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.js$/,
use: [
'babel-loader'
]
}
]
},
// 번들링 후 결과물의 처리방식 등 다양한 플러그인 사용을 위한 구성요소 추가
plugins: [
new HtmlPlugin({ // 생성자를 이용한 플러그인 생성
template: './index.html' // 템플릿 연결
}),
new CopyPlugin ({
patterns: [
{ from: 'static' } // static 폴더 안의 내용이 dist로 복사되어 들어가도록 한다.
]
}),
new VueLoaderPlugin()
],
devServer: {
host:'localhost'
}
}
- 당연히, 패키지를 새로 설치했으니 webpack.config.js 파일에 설정을 추가한다.
- 앞서 js 폴더를 삭제했기 때문에 entry 부분을 수정한다.
- module 부분에 새로울 rules를 추가하여 vue 확장자를 가진 파일을 읽을 수 있도록 하고, use 속성값에 vue-loader도 추가한다.
- module의 css 부분에 vue-style-loader를 추가한다.
- 새로운 플러그인을 require를 통해 가져온다.
- 가져온 플러그인을 맨 아래 plugin 부분에 추가한다.
2. App.vue 파일을 이용한 샘플 출력확인
a) App.vue 내용 작성
<template>
<h1>{{message}}</h1>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!!!"
}
}
}
</script>
<style>
</style>
b) main.js 내용작성
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
c) index.html 내용작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Vue Project!</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
/>
</head>
<body>
<div id="app"></div>
</body>
</html>
d) 개발서버 실행하여 확인하기
- 터미널 입력: npm run dev
- 아래 사진처럼, successfully 확인 후 링크를 이용하여 출력화면을 확인한다.
'Front-end > Vue3' 카테고리의 다른 글
| 5. Vue - 기본 동작원리 및 반응성 (0) | 2021.05.13 |
|---|---|
| 4. Vue - ESLint 설정 (0) | 2021.05.12 |
| 3. Vue - 이미지 파일 연결 및 경로 별칭 설정 (0) | 2021.05.12 |
| 1. Vue - 친해지기 (0) | 2021.05.11 |
| 0. Vue - 시작 준비 (0) | 2021.05.11 |
댓글