1.📦 기본 패키지 구성
npm init -y을 통해 기본 npm 개발 환경 생성.- 아래 명령어를 통해 vue 패키지 설치
- webpack 패키지(
webpack,webpack-cli,webpack-dev-server), babel 패키지(babel-loader,@babel/core,@babel/preset-env)와 vue파일을 컴파일링하고 번들링하는 패키지(vue-loader,vue-template-complier)는 개발에서만 사용하는 패키지라-D명령어를 이용해 설치. (+이후 html파일을 자동적으로 생성하는html-webpack-plugin패키지도 추가)
npm i vue
npm i -D vue-loader vue-template-compiler vue-style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env css-loader
- ⭐️ 위의 명령어로 설치시 vue3가 설치되기 때문에 본인은 vue2를 사용하기 위해 아래와 같이 설치했음(vue-loader는 16버전 이상은 vue 3만 지원)
npm i vue@2.6.14
npm i -D vue-loader@15.9.3
2.🛠vue 실행파일 구성
- 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>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>- App.vue
<template>
<div id="app">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World',
};
},
};
</script>
<style>
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
</style>- src/main.js(진입점)
import Vue from 'vue';
import App from '../App.vue';
new Vue({
el: '#app',
render: h => h(App)
});3.🛠 webpack 설정
- webpack.config.js
vue-loader는.vue확장자 파일을 자바스크립트모듈로 변환하는 패키지.html-webpack-plugin은 html파일을 동적으로 생성하여,template속성에 값의경로에 있는 파일을 기본으로 번들링된 output결과가index.html로 자동적으로 나옴.babel-loader는 ES6의 문법을 ES5문법으로 변환하는 패키지.(여기서는 같이 쓰이는 플러그인은 babel의 핵심인@babel/core와 ES6의 문법을 ES5문법으로 변환하는 플러그인인@babel/preset-env같이 사용)
4.css-loader,vue-style-loader는.vue파일 안에 있는 CSS속성들을 파일로가져와 html파일에 넣어주는 패키지.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
new VueLoaderPlugin(),
]
};- package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "./src/main.js",
"scripts": {
"start": "webpack-dev-server --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"vue-loader": "^15.9.3",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"
},
"dependencies": {
"vue": "^2.6.14"
}
}4.실행 및 결과 🎉
npm run start
