Vue-default-setting
Vue์ ์ธํ ๊ฐ์ด๋๋ฌธ์ ์ฐธ๊ณ vue-loader
vue-loader : Vue ์ปดํฌ๋ํธ๋ฅผ ์ผ๋ฐ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋๋ก ๋ณํํ ์ ์๋ webpack์์ ์ฌ์ฉํ๋ ๋ก๋
vue-template-compiler :
.vue
๋ผ๋ ํ์ผ์ ๋ก๋ ํ๊ธฐ์ํ ํ๋ฌ๊ทธ์ธvue-style-loader :
.vue
๋ผ๋ ํ์ผ์์ CSS๋ฅผ ๋ก๋ฉํ๋๊ฒ์ ๋๋ค.
$ npm install -D vue-loader vue-template-compiler vue-style-loader
$ npm i vue
// package.json
{
"name": "Vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prod": "webpack --mode=production",
"dev": "webpack --mode=development",
"watch": "webpack-dev-server --mode development --open --hot"
},
"keywords": [
"Vue"
],
"author": "",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^4.3.0",
"vue-loader": "^15.9.3", // Vue ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค.
"vue-style-loader": "^4.1.2", // Vue ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค.
"vue-template-compiler": "^2.6.11", // Vue ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค.
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.0.9"
},
"dependencies": {
"@babel/polyfill": "^7.10.4",
"vue": "^2.6.11" // Vue ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค.
}
}
// .babelrc
{
"presets":["@babel/preset-env"]
}
// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Vue</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
// webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
require('@babel/polyfill');
module.exports = {
entry: {
app: [
'@babel/polyfill',
path.join(__dirname, 'main.js')
]
},
module: {
rules: [
{ //vue ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค. ST
test: /\.vue$/,
exclude: /node_module/,
use: {
loader: 'vue-loader'
}
}, //vue ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค. ED
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin(), // vue ํ๋ก์ ํธํ ๋ ์ถ๊ฐํฉ๋๋ค.
new HtmlWebpackPlugin({
template: path.join(__dirname, 'index.html')
}),
new CopyPlugin({
patterns: [
{ from: 'assets/', to: '' }
]
}),
new CleanWebpackPlugin()
],
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist')
},
}
// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
// App.vue
<template>
<h1> {{msg}} </h1>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style scoped>
h1 {
color: red;
}
</style>
๋ทฐ๋ฅผ ์๋์ผ๋ก ์ฒ์๋ถํฐ ํ๊ฒฝ์ค์ ์ ํ๋ค๊ณ ํ์๋ ๊ธฐ๋ณธ์ ์ธ ํด๋ ๊ตฌ์กฐ์ ๋๋ค.
Last updated
Was this helpful?