vue 프로젝트 생성
- vue-cli 를 이용하여 생성하지 않고 프로젝트를 구성해보자.
준비
- node 프로젝트 생성
npm init -y
npm init 명령어를 이용하여 package.json 을 생성
- 필요한 모듈 설치
npm i -S vue
npm i -D @babel/core @babel/preset-env
npm i -D webpack-cli webpack webpack-devserver html-webpack-plugin mini-css-extract-plugin
npm i -D babel-loader css-loader vue-loader vue-template-compiler
npm i -D node-sass sass-loader
- webpack.config.js 작성
// webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development",
entry: "./src/main.js",
output: {
filename: 'bundle.js',
path: path.join(__dirname, '/dist')
},
module: {
rules: [
{
test: /\.vue$/,
use : {
loader: 'vue-loader',
options: {
}
}
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/env", {}]
}
}
},
{
test: /\.(css|scss)$/,
use: [
'vue-style-loader',
MiniCSSExtractPlugin.loader,
'css-loader',
'sass-loader',
]
}
]
},
resolve: {
alias: {
"vue$": "vue/dist/vue.esm.js"
},
extensions: ['*', '.js', '.vue', '.json', '.wasm', '.ts', '.tsx', '.mjs', '.cjs']
},
plugins: [
new VueLoaderPlugin(),
new MiniCSSExtractPlugin({
filename: "index.css"
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, '/src/index.html'),
inject: true,
filename: 'index.html'
}),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
inline: true,
hot: true,
host: "localhost",
port: 5000
}
}
- package.json scripts 작성
"build": "webpack --mode=production",
"dev": "webpack-dev-server --open"
- /src/main.js 작성 (webpack entry 파일)
import Vue from 'vue';
import App from './App';
new Vue({
el: '#app',
components: {App},
template: '<App/>'
});
- /src/index.html 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>안녕 나는 뷰를 수동으로 구성해봤엉!!!</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
developer life started : 2016.06.07 ~ 흔한 Front-end 개발자