Portfolio


{

"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"

}

}


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,
	},
}


{
  "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"
      }]
    }
}


.vscode

.cache

.idea

.DS_Store

node_modules/

.env

dist/

build/

개발 환경 세팅

pakage.json

Webpack.config

Eslint

gitignore