pakage.json
{
"name": "vue-3",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@vue/compiler-sfc": "^3.2.19",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.3.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^7.18.0",
"html-webpack-plugin": "^5.3.2",
"sass": "^1.42.1",
"sass-loader": "^12.1.0",
"vue-loader": "^16.8.1",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.55.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.0"
},
"dependencies": {
"vue": "^3.2.19",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
}
}
Webpack.config
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlPlugIn = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
resolve: {
// 확장자 생략
extensions: ['.vue', '.js'],
// 경로 별칭 설정
alias: {
'~': path.resolve(__dirname, 'src'),
//여러개 사용가능
// "@": path.resolve(__dirname, "src"),
},
},
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
clean: true,
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader',
},
{
test: /\.s?css$/,
// loader가 여러개일때는 순서가 중요. 뒤에서 앞으로 구동
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
},
],
},
plugins: [
new VueLoaderPlugin(),
new HtmlPlugIn({
template: './src/index.html',
}),
new CopyPlugin({
patterns: [{ from: 'static' }],
}),
],
devServer: {
// port: 8080
historyApiFallback: true,
},
}
Eslint
{
"env" : {
"browser": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-recommended"
],
"rules" : {
"indent": ["error", "tab"],
"semi" : ["error","never"],
"quotes" : ["error","double"],
"vue/html-closing-bracket-newline": ["error", {
"singleline": "never",
"multiline": "never"
}],
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
"normal": "never",
"component": "always"
},
"svg": "always",
"math": "always"
}]
}
}
gitignore
.vscode
.cache
.idea
.DS_Store
node_modules/
.env
dist/
build/