Vue3 Webpack Template
이번에는 webpack을 통해 만들었던 템플릿을 활용하여 Vue.js 개발환경을 설정해보도록 하겠습니다. GitHub에 있는 webpack-template을 참고 부탁드립니다.
1. VS Code로 가져오기
$ cd Desktop
$ npx degit orosy/webpack-template-basic vue3-webpack-template
$ cd vue3-webpack-template
$ code . -r원격저장소에 있는 템플릿을 바탕화면에 vue3-webpack-template라는 폴더를 만들어 VS Code로 가져오도록 하겠습니다.
2. Vue.js에 맞게 수정하기
2.1 src 폴더 생성
프로젝트 루트 경로에 src 폴더를 생성합니다. 또한, 루트 경로에 있는 js 폴더는 삭제해줍니다.
2.2 main.js, App.vue 파일 생성
src 폴더 내에 main.js, App.vue 파일을 만들어줍니다.
2.3 vue 설치하기
$ npm i vue@nextVue.js 최신의 3버전을 설치하기 위해 vue@next라는 명령어를 입력해줍니다. 또한, 개발 환경뿐만 아니라 브라우저에서 동작시킬 수 있도록 해야하므로 개발 의존성이 아닌 일반 의존성으로 설치합니다.
3. 추가 패키지 설치하기
$ npm i -D vue-loader@next vue-style-loader '@vue/compiler-sfc'.vue 확장자의 파일을 프로젝트에서 실제로 관리하려면 추가적인 webpack과 관련된 패키지를 설치해야 합니다.
총 3가지를 개발 의존성으로 설치하며, 이중 @vue/compiler-sfc는 Vue.js 파일을 브라우저에서 동작할 수 있도록 변환하는 역할을 합니다.
4. webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
entry: './src/main.js',
module: {
rules: [
{
test: /\.vue$/, // .vue로 끝나는 파일 검색
use: 'vue-loader' // vue-loader 연결
},
{
test: /\.s?css$/,
use: [
'vue-style-loader',
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
}
plugins: [
new VueLoaderPlugin()
]
} webpack.config.js의 구성 옵션을 수정하겠습니다. 템플릿 내용에서 Vue.js를 활용하기 위해 필요한 부분만 수정하시면 됩니다.
5. 프로젝트 테스트하기
실제로 App.vue 파일을 통해 원활히 프로젝트가 진행되는지 테스트를 진행해보겠습니다.
5.1 App.vue
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!!!'
}
}
}
</script>5.2 main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')5.3 index.html
<body>
<div id='app'></div>
</body>5.4 npm run dev
페이지에 Hello Vue!!!가 정상적으로 출력되면 완성입니다.
6. extensions
이번에는 .js, .vue 확장자 없이도 import할 수 있도록 프로젝트 환경을 설정해봅시다.
6.1 webpack.config.js
module.exports = {
resolve: {
extensions: ['.js', '.vue']
}
}6.2 main.js
import App from './App'7. components
App.vue 파일에 연결한 여러 컴포넌트를 만들어보도록 하겠습니다.
7.1 components 폴더 생성
src 폴더 내에 components 폴더를 생성합니다.
7.2 HelloWolrd.vue 파일 생성
테스트를 위해 components 폴더에 HelloWolrd.vue 파일을 생성해줍니다.
7.3 images 폴더 이동 및 이름 변경
static 폴더에 있던 images 폴더를 src로 이동하고 이름을 assets로 변경해줍니다.
7.4 HelloWorld.vue
<template>
<img src="~assets/logo.png" alt="orosy">
</template>HelloWolrd.vue 에 위와 같이 코딩을 해줍니다.
7.5 추가적인 패키지 설치
.vue 확장자 파일에서 이미지를 사용하고 경로를 명시하기 위해서 추가적인 webpack의 셋팅이 필요합니다.
$ npm i -D file-loader // 특정한 파일을 읽어 브라우저에 출력7.6 webpack.config.js
module.exports = {
resolve: {
// 경로 별칭
alias: {
'~': path.resolve(__dirname, 'src'),
'assets': path.resolve(__dirname, 'src/assets')
},
rules: {
test: /\.(png|jpe?g|gif|webp)$/,
use: 'file-loader'
}
}구성 옵션을 작성하여 이미지 파일을 사용할 수 있도록 합니다.
7.7 App.vue
<template>
<HelloWorld />
</template>
<script>
import HelloWorld from '~/components/HelloWorld'
export default {
components: {
HelloWorld
}
}
</script>App.vue 파일에 코딩을 진행하고 개발 서버를 열었을 때, 이미지가 잘 출력되면 완성입니다.
