노드의 모듈을 만들었다
웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다 .
entry 하나로 합칠 파일들을 모아놓는곳 나중에 app.js로 합쳐진다(output을 통해)
//뷰를 설치했던것을 import로 가져온다
import Vue from 'vue';
import NumberBaseball from './NumberBaseball.vue';
new Vue(NumberBaseball).$mount('#root');
NumberBaseball.vue
<template>
<div>
<h1>{{result}}</h1>
<form v-on:submit="onSubmitForm">
<input ref="answer" type="text" maxlength="4" v-model="value" />
</form>
<div>시도: {{}}</div>
</div>
</template>
<script>
export default {
data() {
return {
value: "",
result: ""
};
},
methods: {
onSubmitForm(e) {
e.preventDefault();
}
}
};
</script>
<style>
</style>
numberBaseball.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>숫자야구</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>dist에 있는 app.js를 만들기 위해서는 app파일을 생성해준다 이를 위해서
build를 위해 scripts test 부분을 "build": "webpack" 으로 바꿔준다.
그 후 npm run build 를 실행하면
오류가 발생한다
webpack.config.js 파일을 수정해줘야한다
require을 사용해서 path를 가져온다
path.join(__dirname(현재경로), dist(폴더이름); path.join을 활용해서 둘의 경로를 서로 합쳐준다
const path = require('path');
// 노드의 모듈을 만들었다
// 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다 .
module.exports = {
//하나로 합쳐질 파일의 이름 app (나중에 app.js로 하나로 합쳐진다 )
entry: {
app: './main.js',
// app:path.join(__dirname, 'main.js');
},
//웹팩의 핵심
module: {
//자바스크립트 파일들을 어떻게 처리할건지 정해둔다
rules: [{}],
},
plugins: [],
//내보낼 파일의이름
output: {
//filename: [name].js
filename: '[name].js',
//__dirname 현재 경로, dist 폴더 이름
path: path.join(__dirname, 'dist'), //경로
},
};이후 npm run build를 실행하면 또 오류가 발생한다.
weppack은 자바스크립트 파일을 합쳐주는데 vue는 자바스크립트 파일이 아니기 때문에
rules 를 수정해줘야 한다
webpack.config.js
const path = require('path');
// 노드의 모듈을 만들었다
// 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다 .
module.exports = {
//하나로 합쳐질 파일의 이름 app (나중에 app.js로 하나로 합쳐진다 )
entry: {
// app: './main.js',
app: path.join(__dirname, 'main.js'),
},
//웹팩의 핵심
module: {
//자바스크립트 파일들을 어떻게 처리할건지 정해둔다
rules: [{
test: /\.vue$/, //파일명이 .vue로 끝나는 파일
loader: 'vue-loader', //vue-loader을 사용하겠다.
}, ],
},
plugins: [],
//내보낼 파일의이름
output: {
//filename: [name].js
filename: '[name].js',
//__dirname 현재 경로, dist 폴더 이름
path: path.join(__dirname, 'dist'), //경로
},
};vue-loader는 install되지 않았기 때문에 다시 npm install vue-loader -D 실행
-> 그후 npm run build를 실행하면 또 에러 발생
vue-loader plugin와 vue-template-compiler(vue와 vue-template-compiler의 버전이 일치해야한다!!!)플러그인 설치
다시
wepack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin);
plugins에 new VueLoaderPlugin() 호출
mode: 개발용, 배포용 설정
devtool: eval을 쓰면 테스트용, hidden-source-map 을 쓰면 개발용
resolve를 사용하면 확장자를 제거하고 불러낼 수 있다.
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
// 노드의 모듈을 만들었다
// 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다.
// 노드환경에서는 require을 사용하고 vue환경에서는 import를 사용한다.
module.exports = {
mode: 'development', //개발용 배포용:production
devtool: 'eval', //테스트 배포용 : 'hidden-source-map',
resolve: {
extensions: ['.js', '.vue'], //확장자를 제거하고 불러낼수 있다.
},
//하나로 합쳐질 파일의 이름 app (나중에 app.js로 하나로 합쳐진다 )
entry: {
// app: './main.js',
app: path.join(__dirname, 'main.js'),
},
//웹팩의 핵심
module: {
//자바스크립트 파일들을 어떻게 처리할건지 정해둔다
rules: [{
test: /\.vue$/, //파일명이 .vue로 끝나는 파일
loader: 'vue-loader', //vue-loader을 사용하겠다. use: 'vue-loader'도 가능
}, ],
},
plugins: [new VueLoaderPlugin()],
//내보낼 파일의이름
output: {
//filename: [name].js
filename: '[name].js',
//__dirname 현재 경로, dist 폴더 이름
path: path.join(__dirname, 'dist'), //경로
},
};그후 npm run build 실행
{
"name": "response-check",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.11"
},
"devDependencies": {
"vue-loader": "^15.8.3",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
}"build": "webpack" 에 --watch를 붙여주면 코드가 변경될때마다 자동으로 빌드를 실행해 준다.
.vue 파일에서 style 속성을 사용하려면
npm i vue-style-loader -D, npm i css-loader -D 로 추가 loader을 설치후
다시 npm run build를 실행하면된다
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
// 노드의 모듈을 만들었다
// 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다.
// 노드환경에서는 require을 사용하고 vue환경에서는 import를 사용한다.
module.exports = {
mode: 'development', //개발용 배포용:production
devtool: 'eval', //테스트 배포용 : 'hidden-source-map',
resolve: {
extensions: ['.js', '.vue'], //확장자를 제거하고 불러낼수 있다.
},
//하나로 합쳐질 파일의 이름 app (나중에 app.js로 하나로 합쳐진다 )
entry: {
// app: './main.js',
app: path.join(__dirname, 'main.js'),
},
//웹팩의 핵심
//loader는 javascript가 아닌 것들(vue, css등등)을 javascript로 만들어주는 역활을 한다.
module: {
//자바스크립트 파일들을 어떻게 처리할건지 정해둔다
rules: [{
test: /\.vue$/, //파일명이 .vue로 끝나는 파일
loader: 'vue-loader', //vue-loader을 사용하겠다. use: 'vue-loader'도 가능
},
// 파일명이 .css로 끝나는 파일들은 해당 loader을 사용
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
},
],
},
//output이 나오기전에 추가적인 작업을 해준다
plugins: [new VueLoaderPlugin()],
//내보낼 파일의이름
output: {
//filename: [name].js
filename: '[name].js',
//__dirname 현재 경로, dist 폴더 이름
path: path.join(__dirname, 'dist'), //경로
},
};
npm i -D webpack-dev-server 를 설치한 후
package.json에 "dev": "webpack-dev-server --hot" 를 실행후 localhost:8080에 접속해주면 된다
{
"name": "response-check",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --watch",
"dev": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.11"
},
"devDependencies": {
"css-loader": "^3.4.2",
"vue-loader": "^15.8.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
}
webpack-config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
// 노드의 모듈을 만들었다
// 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다.
// 노드환경에서는 require을 사용하고 vue환경에서는 import를 사용한다.
module.exports = {
mode: 'development', //개발용 배포용:production
devtool: 'eval', //테스트 배포용 : 'hidden-source-map',
resolve: {
extensions: ['.js', '.vue'], //확장자를 제거하고 불러낼수 있다.
},
//하나로 합쳐질 파일의 이름 app (나중에 app.js로 하나로 합쳐진다 )
entry: {
// app: './main.js',
app: path.join(__dirname, 'main.js'),
},
//웹팩의 핵심
//loader는 javascript가 아닌 것들(vue, css등등)을 javascript로 만들어주는 역활을 한다.
module: {
//자바스크립트 파일들을 어떻게 처리할건지 정해둔다
rules: [{
test: /\.vue$/, //파일명이 .vue로 끝나는 파일
loader: 'vue-loader', //vue-loader을 사용하겠다. use: 'vue-loader'도 가능
},
// 파일명이 .css로 끝나는 파일들은 해당 loader을 사용
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
},
],
},
//output이 나오기전에 추가적인 작업을 해준다
plugins: [new VueLoaderPlugin()],
//내보낼 파일의이름
output: {
//filename: [name].js
filename: '[name].js',
//__dirname 현재 경로, dist 폴더 이름
path: path.join(__dirname, 'dist'), //경로
publicPath: '/dist', //자동 서버 새로고침을 위한
},
};publicPath: './dist' 를 설정해주면
webpack --watch의 진화판으로써 저장시 새로고침조차 자동으로 해준다