Upgraded to Webpack 4

.babelrc

@@ -1,3 +1,9 @@
 {
-  "presets": ["vue-app"]
-}
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-optional-chaining"
+  ]
+}

package.json

@@ -8,27 +8,33 @@
     "build": "rimraf dist && webpack -p --progress --hide-modules"
   },
   "dependencies": {
-    "element-ui": "^2.3.4",
-    "vue": "^2.5.16"
+    "element-ui": "^2.13.2",
+    "vue": "^2.6.11"
   },
   "engines": {
     "node": ">=6"
   },
   "devDependencies": {
-    "autoprefixer": "^6.6.0",
-    "babel-core": "^6.24.1",
-    "babel-loader": "^6.4.0",
-    "babel-preset-vue-app": "^1.2.0",
-    "css-loader": "^0.27.0",
-    "file-loader": "^0.10.1",
-    "html-webpack-plugin": "^2.24.1",
-    "postcss-loader": "^1.3.3",
-    "rimraf": "^2.5.4",
-    "style-loader": "^0.13.2",
-    "url-loader": "^0.5.8",
-    "vue-loader": "^13.3.0",
-    "vue-template-compiler": "^2.5.16",
-    "webpack": "^2.4.1",
-    "webpack-dev-server": "^2.4.2"
-  }
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.10.4",
+    "autoprefixer": "^9.8.5",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-vue-app": "^2.0.0",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "postcss-loader": "^3.0.0",
+    "rimraf": "^3.0.2",
+    "style-loader": "^1.2.1",
+    "url-loader": "^4.1.0",
+    "vue-loader": "^15.9.3",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "browserslist": "> 0.25%, not dead"
 }

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+    <img src="/assets/logo.png">
     <div>
       <el-button @click="startHacking">Start</el-button>
     </div>

webpack.config.js

@@ -1,12 +1,12 @@
 const resolve = require('path').resolve
-const webpack = require('webpack')
+const webpack = require('webpack');
+const VueLoaderPlugin = require("vue-loader/lib/plugin");
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const url = require('url')
 const publicPath = ''
 
 module.exports = (options = {}) => ({
   entry: {
-    vendor: './src/vendor',
     index: './src/main.js'
   },
   output: {
@@ -41,13 +41,23 @@ module.exports = (options = {}) => ({
     ]
   },
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin({
-      names: ['vendor', 'manifest']
-    }),
+    new VueLoaderPlugin(),
     new HtmlWebpackPlugin({
       template: 'src/index.html'
     })
   ],
+  optimization: {
+      splitChunks: {
+          cacheGroups: {
+              vendor: {
+                  priority: 100,
+                  test: /node_modules\//,
+                  chunks: "all",
+                  name: "vendor",
+              },
+          }
+      }
+  },
   resolve: {
     alias: {
       '~': resolve(__dirname, 'src')