Merge pull request #25 from KunHwanAhn/release/0.0.2

Release/0.0.2

.eslintrc.js

@@ -13,13 +13,14 @@ module.exports = {
     'vue',
   ],
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
     ecmaVersion: 2020,
     sourceType: 'module',
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'import/no-unresolved': 'off',
     'import/extensions': ['error', 'always', {
       js: 'never',
       mjs: 'never',

.lintstagedrc

@@ -1,6 +1,5 @@
 {
   "*.{js,vue}": [
-    "eslint --fix --ext .js,.vue src",
-    "git add"
+    "eslint --fix --ext .js,.vue src"
   ]
 }

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.tabSize": 2,
+  "editor.renderWhitespace": "all",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  "eslint.alwaysShowStatus": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "files.eol": "\n"
+}

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## v0.0.2 (2020-12-11)
+[webpack]
+- 버전 업그레이드 (v4.x -> v5.10.0)
+- 로더와 플러그인 업그레이드, deprecated 라이브러리 교체
+
+[npm]
+- vue-router, vuex 추가
+
 ## v0.0.1 (2020-03-06)
 [webpack]
 - webpack 설정 추가

README.md

@@ -1,2 +1,22 @@
 # webpack-babel-vue-template
 Webpack + Babel + Vue.js Template without VueCli
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "include": [
+    "./src/**/*"
+  ]
+}

package.json

@@ -8,42 +8,51 @@
   "license": "MIT",
   "private": false,
   "scripts": {
-    "serve": "NODE_ENV=development webpack-dev-server",
-    "build": "NODE_ENV=production webpack",
-    "lint": "eslint --ext .js,.vue src"
+    "serve": "cross-env NODE_ENV=development webpack serve",
+    "build": "cross-env NODE_ENV=production webpack",
+    "lint": "eslint --fix --ext .js,.vue src"
   },
   "dependencies": {
-    "core-js": "^3.6.4",
-    "vue": "^2.6.11"
+    "core-js": "^3.8.1",
+    "vue": "^2.6.11",
+    "vue-router": "^3.4.9",
+    "vuex": "^3.6.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.7",
-    "@babel/preset-env": "^7.8.7",
-    "autoprefixer": "^9.7.4",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.0.6",
+    "@babel/core": "^7.12.10",
+    "@babel/eslint-parser": "^7.12.1",
+    "@babel/preset-env": "^7.12.10",
+    "autoprefixer": "^10.1.0",
+    "babel-loader": "^8.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.3.0",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.4.2",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-loader": "^3.0.3",
+    "copy-webpack-plugin": "^7.0.0",
+    "cross-env": "^7.0.2",
+    "css-loader": "^5.0.1",
+    "css-minimizer-webpack-plugin": "^1.1.5",
+    "deepmerge": "^4.2.2",
+    "eslint": "^7.15.0",
+    "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-vue": "^6.2.1",
-    "file-loader": "^5.1.0",
-    "html-webpack-plugin": "^3.2.0",
+    "eslint-plugin-vue": "^7.2.0",
+    "eslint-webpack-plugin": "^2.4.1",
+    "fibers": "^5.0.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.0.0-alpha.15",
     "husky": "^4.2.3",
     "lint-staged": "^10.0.8",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
-    "sass": "^1.26.2",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.1.3",
-    "terser-webpack-plugin": "^2.3.5",
-    "vue-loader": "^15.9.0",
+    "mini-css-extract-plugin": "^1.3.2",
+    "postcss": "^8.2.1",
+    "postcss-loader": "^4.1.0",
+    "sass": "^1.30.0",
+    "sass-loader": "^10.1.0",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.0.3",
+    "vue-loader": "^15.9.5",
     "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack": "^5.10.0",
+    "webpack-bundle-analyzer": "^4.2.0",
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^4.0.0-beta.0"
   }
 }

public/index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean">
     <title>Webpack + Babel + Vue.js Template</title>
   </head>
   <body>

src/App.vue

@@ -1,15 +1,15 @@
 <template>
-  <div :class="$style.hello">
-    Hello Vue!
+  <div>
+    <RouterView />
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      drawer: false,
+    };
+  },
+};
 </script>
-
-<style lang="scss" module>
-.hello {
-  font-size: 24px;
-}
-</style>

src/main.js

@@ -1,9 +1,15 @@
 import Vue from 'vue';
-// eslint-disable-next-line import/no-unresolved
 import '@/styles/index.scss';
 
+import store from './store';
+import router from './routes';
+import plugins from './plugins';
+
 import App from './App.vue';
 
 new Vue({
+  store,
+  router,
+  ...plugins,
   render: (h) => h(App),
 }).$mount('#app');

src/plugins/index.js

@@ -0,0 +1,2 @@
+export default {
+};

src/routes/index.js

@@ -0,0 +1,36 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+import HelloWorld from '@/views/HelloWorld.vue';
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: '/',
+    component: HelloWorld,
+  },
+  {
+    path: '/contact',
+    component: () => import(/* webpackChunkName: "contact" */ '@/views/Contact.vue'),
+  },
+  {
+    path: '*',
+    redirect: '/',
+  },
+];
+
+const router = new VueRouter({
+  mode: 'history',
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (to.hash) {
+      return { selector: to.hash };
+    } if (savedPosition) {
+      return savedPosition;
+    }
+    return { x: 0, y: 0 };
+  },
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  modules: {},
+});

src/styles/index.scss

@@ -1,4 +1,9 @@
+html * {
+  font-family: 'Roboto', 'Noto Sans KR', serif;
+}
+
 * {
+  font-family: 'Roboto', 'Noto Sans KR', serif;
   box-sizing: border-box;
 
   ::before {

src/views/Contact.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div>
+      <RouterLink to="/">
+        Index
+      </RouterLink>
+    </div>
+    <div class="desc">
+      This is contact page
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.desc {
+  color: tomato;
+}
+</style>

src/views/HelloWorld.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div>
+      <RouterLink to="/contact">
+        Contact
+      </RouterLink>
+    </div>
+    <div>Hello Vue!</div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.img-container {
+  max-width: 400px;
+}
+</style>