webpack을 이용한 vue.js 구성하기
npx degit youngseoKim-kr/webpack-template-basic vue3-webpack-template
npx를 통해서 github에 저장된 내 이름과 폴더의 내용을 vue3-webpack-template 로 복제
cd 를 통해서 파일을 cd vue3-webpack-template로 이동하고
code . -r 로 실행시킨다.
src 폴더를 만들고 app.vue 와 main.js 파일을 만들고 원래 있던 js 폴더는 삭제시킨다.
npm i vue@next 그 다음 뷰를 설치한다.
vue.js 는 문법을 해석하는 용도이고 vue 파일을 프로그램에서 관리하려면 여러 패키지를 더 설치해줘야 한다.
npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc 3개의 패키지를 설치한다.
// 구성옵션을 제공해야 한다. nodejs 환경에서 동작
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader') //추가!
module.exports = {
//parcel index.html 파일 진입점 설정
entry:'./src/main.js', //js 파일을 진입점으로 설정 수정!
//결과물(번들)을 반환하는 설정
output:{
//path filename은 따로 지정해주지 않아도 동작한다.
// path:path.resolve(__dirname,'dist'), //두개의 인수를 합쳐서 가져온다.__dirname 은 현재파일이 있는 경로
// filename:'main.js', //dist 폴더에 만들어질 js 파일 이름
clean:true //기존에 만든거 제거
},
module : {
rules:[ //추가!
{
test:/\.vue$/,
use:'vue-loader'
},
{
test:/\.s?css$/, // .css , .scss 파일을 찾는다.
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'}
]
}),
new VueLoaderPlugin() //추가!
],
devServer : {
host:'localhost'
}
}webpack.config.js 파일에 추가라고 적힌 부분을 수정했습니다.
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount('#app')main.js
<template>
<h1>{{message}}</h1>
</template>
<script>
export default ({
data() {
return{
message:'Hello Vue!!!'
}
},
})
</script>App.vue
<!DOCTYPE html>
<html lang="ko">
<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 Webpack!</title>
<!-- reset.css -->
<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>index.html
이렇게 하고 npm run dev를 하면
Hello Vue!!! 가 화면에 잘나오는걸 확인할 수 있다.
import {createApp} from 'vue'
import App from './App' //확장자 없음
createApp(App).mount('#app')main.js 파일의 확장자를 안적어주어도 오류가 안생기게 하는 방법이 있는데
module.exports = {
resolve:{
extensions : ['.js','.vue']
},
//parcel index.html 파일 진입점 설정
entry:'./src/main.js', //js 파일을 진입점으로 설정 수정!webpack.config.js 파일에 resolve를 추가해주면 된다.
이미지
파일을 이렇게 변경시켜주고 이미지를 출력하기 위해서 패키지를 설치해준다.
npm i -D file-loader 설치해주고 webpack.config.js 파일로 이동해서
module.exports = {
resolve:{
extensions : ['.js','.vue'],
alias:{ //경로 별칭
'~':path.resolve(__dirname,'src'),
'assets':path.resolve(__dirname,'src/assets')
}
},
//parcel index.html 파일 진입점 설정
entry:'./src/main.js', //js 파일을 진입점으로 설정 수정!alias 부분을 추가하고
module : {
rules:[ //추가!
{
test:/\.vue$/,
use:'vue-loader'
},
{
test:/\.s?css$/, // .css , .scss 파일을 찾는다.
use: [
'vue-style-loader', //가장 마지막 해석 추가!
'style-loader', //순서가 중요하다!
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test:/\.js$/,
use: [
'babel-loader'
]
},
{
test:/\.(png|jpe?g|gif|webp)$/, //이미지 추가
use:'file-loader'
}
]
},module 부분에 test 이미지 추가 부분을 추가해준다.
<template>
<h1>{{message}}</h1>
<HelloWorld />
</template>
<script>
import HelloWorld from '~/components/HelloWorld' //경로별칭
export default ({
components:{
HelloWorld
},
data() {
return{
message:'Hello Vue!!!'
}
},
})
</script>app.vue 파일을 수정하여 이미지를 넣을 수 있게 해주고 실행하면 이미지가 잘출력이 된다.
'vue.js' 카테고리의 다른 글
| vue3 문법[computed,Getter,Setter,Watch] (0) | 2021.11.06 |
|---|---|
| vue3_문법[인스턴스와 라이프사이클, v-once, 원시HTML, v-bind,v-on, 동적전달인자] (0) | 2021.11.06 |
| veu.js[webpack]_3 (0) | 2021.11.05 |
| vue.js [Webpack]_2 (0) | 2021.11.03 |
| vue.js 시작하기 (0) | 2021.11.03 |